Nested Flexbox + Images

Question

Plnkr of my situation: https://plnkr.co/edit/ppuUhrWB08ULGuFT4tXn

I recommend popping out the results window.

I have a vertical flex container that contains two items. The second item is also a vertical flex container. It contains several items that are horizontal flex containers. These horizontal containers contain two items. One of the items contains an image, set to height:100%. The other item is set to fill remaining space.

Visual Representation

grey = top-level vertical flex container
turquoise = fixed item
green = second vertical flex container
yellow = horizontal flex-container
red = flex item containing image
dark purple = image
magenta = flex item designated to fill empty space

Expectation: the item containing the image shrinks to contain the height:100% image, the second image expands to fill the space.

Actual Result: the item is the NATURAL WIDTH of the image and doesn't shrink, even though the image itself is smaller.

Visual Representation:

I've also tried not putting the img inside a container and letting it just be a flex item, but then height:100% makes the image as big as the vertical flex container because ¯\_(ツ)_/¯

I'm not sure how to go about resolving this issue.

HTML:

<div class="body-container">
  <div class="body flex-column">
    <div class="header flex-hold w-100">
      I AM A HEADER
    </div>
    <div class="long-content flex-column w-100 flex-fill d-flex">
      <div class="item d-flex">
        <div class="thumb flex-hold"><img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" /></div>
        <div class="copy flex-fill">
          <div>Text</div>
        </div>
      </div>
      <div class="item d-flex">
        <div class="thumb flex-hold"><img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" /></div>
        <div class="copy flex-fill">
          <div>Text</div>
        </div>
      </div>
      <div class="item d-flex">
        <div class="thumb flex-hold"><img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" /></div>
        <div class="copy flex-fill">
          <div>Text</div>
        </div>
      </div>
      <div class="item d-flex">
        <div class="thumb flex-hold"><img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" /></div>
        <div class="copy flex-fill">
          <div>Text</div>
        </div>
      </div>
      <div class="item d-flex">
        <div class="thumb flex-hold"><img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" /></div>
        <div class="copy flex-fill">
          <div>Text</div>
        </div>
      </div>

    </div>
  </div>
</div>

CSS:

body {
  height:100vh;
  margin:0px;
  padding:0px;
}

div {
  display:inline-block;
}

.d-flex {
  display:flex;
}

.flex-column {
  flex-direction:column;
}

.body-container {
  height:100%;
}

.body {
  display:flex;
  height:100%;
  flex: 1 1 auto;
}

.flex-hold {
  flex: 0 0 auto;
}

.flex-fill {
  flex: 1 1 auto;
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.header {

}

.long-content {
  background-color:#ffff00;
}

.item {
  margin:4px;
  background-color:#ccc;
  flex: 1 1 auto;
}

.thumb {
  display:block;
}

img {
  height:100%;
}

I'm having a hard time picturing what you are trying to accomplish. Can you provide an image or sketch of what you want it to look like? — Nick Wyman, Oct 04 '17 at 15:17
I've actually found a solution. I will post images when I edit the post with the answer. — Valevalorin, Oct 04 '17 at 15:23

Valevalorin · Answer 1 · 2017-10-04T15:53:33.600

I found a solution that works for my specific situation but not entirely sure how applicable it is in the wild. Mostly inspired by this question: https://stackoverflow.com/a/15389545/1857860

I reorganized the html of my horizontal container like so:

<div class="item d-flex flex-fill">
  <div class="inner-wrapper">
    <div class="d-flex h-100 w-100">
      <!--<div class="thumb flex-hold">-->
        <img class="h-100 flex-hold" src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" />
      <!--</div>-->
      <div class="copy flex-fill">
        <div>Text</div>
      </div>  
    </div>
  </div>
</div>

So, I made my horizontal flex container relative, then inserted two wrapper elements. The first wrapper (inner-wrapper) is position:absolute, height:100%, width:100%. The second wrapper is just another horizontal flex container. Something about putting a flex container inside the absolute container "resets" what it considers to be height 100% for child elements. So, after that all I had to do was remove the container around my image and set it to height:100% and flex: 0 0 auto;

Nested Flexbox + Images

1 Answers1