flexbox image sizing

by sthag

HTML

<div id="root">
  <figure>
    <div id="box">
      <img src="https://via.placeholder.com/512" width="512" height="512" />
    </div>
    <figcaption>Caption</figcaption>
  </figure>
</div>

SCSS

#root {
  height: 256px;
  background-color: lightgray;
  * {
    box-sizing: border-box;
  }
}

figure {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background-color: rgba(255,0,0, .2);
  text-align: center;
}

#box {
  flex: 1;
  background-color: rgba(255,255,0, .2);
  overflow: auto;
  img {
    height: 100%;
    width: auto;
    border: 16px solid black;
    vertical-align: top;
  }
}

figcaption {
  flex: 0 0 auto;
  padding-top: 8px;
}