0

I have a flexbox container with two items. In each item, there is an image with max-width: 100% and max-height: 100% Firefox expands the items, so that they fill the entire container, as if I had set "flex: auto" or "flex-grow: 1" to the items :

Firefox

I would like to have the same behaviour than in Chrome : Chrome

Is it possible ?

.container {
    height: 400px;
    display: flex;

}
img {
    max-width: 100%;
    max-height: 100%;
}
<div class="container">
    <div style="background-color:gainsboro">
        <img src="https://source.unsplash.com/random/900×700/?fruit" alt="">
    </div>
    <div style="background-color: chocolate;">
        <img src="https://source.unsplash.com/random/900×700/?flower" alt="">
    </div>
</div>
Thierry
  • 5,133
  • 3
  • 25
  • 30
  • You're missing a height definition on the `img` containers. Percentage heights require a specified height on the parent, or they default to `height: auto` (content-based). Chrome seems to be deviating from the spec in order to cover for code that overlooks this rule. FF adheres to the rule. https://jsfiddle.net/fdLztq95/ – Michael Benjamin Jan 19 '22 at 16:34
  • [Working with the CSS `height` property and percentage values](https://stackoverflow.com/a/31728799/3597276). – Michael Benjamin Jan 19 '22 at 16:36
  • 1
    Thank you! I thought that the img container, as a flex item (with align-items: stretch), had automatically the same height as its parent. Unfortunately, the real case I am working on is not as simple as the example I attached here, and I am still struggling to set a height property, but it is a good start, thank you. – Thierry Jan 25 '22 at 13:47

0 Answers0