Nested flex elements in a container without a specified height

Question

I have a situation where I need an image to expand to the size of it's container, which is a flex box and cannot have a fixed height.

The direct container is nested inside a few layers of flexboxes, and the outer layer needs to be at a height of 80vh.

I see that the image does not resize vertically when the container has heights and widths set as a percentage. Does anyone have a work around for this? I need a consistent solution for several images with a wide range of aspect ratios (some portrait, some landscape).

Thanks!

See below for Code and CodePen link: https://codepen.io/anon/pen/NgZByM?editors=1100

<div class="wrapper">
  <div class="imperial-image-wrap">
    <section class="imperial-image-card">
      <div class="image-icon-container">
        <div class="previous">
        </div>
        <figure>
          <img src="http://ghk.h-cdn.co/assets/16/09/980x490/landscape-1457107485-gettyimages-512366437.jpg" />
        </figure>
        <div class="next">
        </div>
      </div>
      <section class="action-icons">
        <span>This is a fixed with</span>
      </section>
      <div class="asset-description">
        <div class="asset-title">
          <span>This needs the ability to expand to fit it's content, which is variable.</span>
        </div>  
      </div>
    </section>
  </div>
  <div class="buy-details">
    <span>This is where the details go</span>
  </div>
</div>

.wrapper {
  display:flex;
  height: 80vh;
}
.buy-details {
  width: 350px;
  padding: 10px;
  border: 1px solid black;
}
.imperial-image-wrap {
  width:calc(100%-350px);
  height:80vh;
}
.imperial-image-card {
  height:100%;
  display:flex;
  flex-direction: column;
}
.image-icon-container {
  flex:2 1 auto;
  display:flex;
}
.action-icons {
  border: 1px solid purple;
  display:flex;
  justify-content:center;
  min-height: 15px;
}
.asset-description {
  width: 100%;
  border: 1px solid red;
}
.previous, .next {
  min-width: 15px;
  border: 1px solid red;
}
figure {
  display:flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}
img {
  max-height:100%;
  max-width:100%;
  margin: auto;
}

[**`object-fit`**](https://stackoverflow.com/q/37127384/3597276) maybe? https://codepen.io/anon/pen/mwZZdP?editors=1100 — Michael Benjamin, Jul 20 '17 at 01:21
Thanks! That kiiind of works with chrome/firefox, but for some reason the image still isn't contained within the wrapper when the window is resized vertically after a certain point. In safari, it doesn't resize vertically at all. — Lexie, Jul 20 '17 at 15:57

score 0 · Answer 1 · answered Jul 20 '17 at 19:57

From what I see in your code pen, the issue is the fact that the image exceeds the div's.

I have changed the figure to have max-height:100% instead of height:100%

It looks ok now: https://codepen.io/anon/pen/Zygxqw?editors=1100

.wrapper {
  display:flex;
  height: 80vh;
}
.buy-details {
  width: 350px;
  padding: 10px;
  border: 1px solid black;
}
.imperial-image-wrap {
  width:calc(100%-350px);
  height:80vh;
}
.imperial-image-card {
  height:100%;
  display:flex;
  flex-direction: column;
}
.image-icon-container {
  flex:1;
  display:flex;
}
.action-icons {
  border: 1px solid purple;
  display:flex;
  justify-content:center;
}
.asset-description {
  width: 100%;
  border: 1px solid red;
}
.previous, .next {
  min-width: 45px;
  border: 1px solid red;
}
figure {
  display:flex;
  width: 100%;
  max-height: 100%;
}
img {
  max-width: 100%;
}

Nested flex elements in a container without a specified height

1 Answers1