0

I have a flex container, which for the sake of simplicity has a fixed height of 300px (in reality it has a flexible height). Within this container there are several other containers, such as headers and text.

One of the containers holds an image. This container should grow to fill the height that remains.

In theory, with flexbox this solution is straight forward like this (without the image it does work, too):

<html><body>
    <div style="display: flex; flex-flow: column; height: 300px;">
        <div style="background: green;">HEADER</div>
        <div style="background: red;">CAPTION</div>
        <div style="background: blue;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div style="background: yellow; flex: 1">
            <span>flexible image container that fills the remaining space</span>
        </div>
        <div style="background: orange;">
            <button>ACTION</button>
        </div>
    </div>
</body></html>

But as soon as I add the image the layout breaks and the image takes 100% of its inherent height (in this example: 500px).

<html><body>
    <div style="display: flex; flex-flow: column; height: 300px;">
        <div style="background: green;">HEADER</div>
        <div style="background: red;">CAPTION</div>
        <div style="background: blue;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div style="background: yellow; flex: 1">
            <img src="https://via.placeholder.com/100x500" >
        </div>
        <div style="background: orange;">
            <button>ACTION</button>
        </div>
    </div>
</body></html>

How do I tell this image not to exceed the remaining height calculated by flexbox? Sadly I can't just give every element a fixed height, since more or less every container in this scenario may have arbitrary content.

Markus Rohlof
  • 380
  • 3
  • 13
  • https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container ? – Martin Feb 13 '21 at 16:32
  • @Martin I found this question too, but could not bring the answer in line with my problem. At least none of the suggestions did have any effect on the image height. – Markus Rohlof Feb 13 '21 at 18:27
  • 1
    ? https://jsfiddle.net/s26vkrnj/ – Michael Benjamin Feb 15 '21 at 02:36
  • @MichaelBenjamin Welp, I can't remember what it was, but for some reason what I tried did not work for me. Thanks for pointing this solution out as it is much simpler than the accepted one. – Markus Rohlof Feb 22 '21 at 12:18

1 Answers1

2

The only way to disregard the image height is to use positioning on the image wrapper:

1.position the image absolutely with respect to its wrapper,
2.you can either give a width to the image wrapper or give flex: 1 on item to get half of the available width horizontally.

Source: Image flex item does not shrink height in a flexbox

<html><body>
    <div style="display: flex; flex-flow: column; height: 300px;">
        <div style="background: green;">HEADER</div>
        <div style="background: red;">CAPTION</div>
        <div style="background: blue;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div style="position: relative;background: yellow; flex: 1">
           <img style="display:block;width: 100%;height: 100%; object-fit:cover;position: absolute;top: 0;left: 0" src="https://via.placeholder.com/100x500" >
        </div>
        <div style="background: orange;">
            <button>ACTION</button>
        </div>
    </div>
</body></html>
Ravi
  • 157
  • 12
  • Your answer does work indeed! It comes with the slight downside of the image also exceeding its own maximum height (the literal height of the source image) if the total height is large enough. Since in my specific case its height is (ironically) a fixed value, i can just slap a 'max-height: 500px' onto its container and be done with it. But if you happen to know how to make the image not exceed its own maximum height, that'd be a great addition to your answer! – Markus Rohlof Feb 13 '21 at 18:08
  • Although this is the accepted answer and it works, I have to point to MichaelBenjamin's comment to my question which shows a much more simple solution (https://jsfiddle.net/s26vkrnj/). – Markus Rohlof Feb 22 '21 at 12:21