CODEWITHSUNDEEP
htmlcssflexbox
Markus Rohlof
Markus Rohlof

Reputation: 420

CSS: How to make image not exceed its parents height in flexbox?

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.

Upvotes: 0

Views: 2293

Answers (1)

Ravi
Ravi

Reputation: 167

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>

Upvotes: 2

Related Questions