Make img in flexbox height 100% & responsive, inconsistent flexbox rendering result

Question

I'm trying to put 4 images in a flexbox div in a parent flexbox, with total height 100%, without stretching out of the parent flexbox. I've searched a lot, but I didn't found something useful.

I have made a minimum example:

        html {
            height: 100%;
        }
        body {
            height: 100%;
            margin: 0;
            display: flex;
        }
        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: yellowgreen;
        }
        .imgs {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .img100 {
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
        }

    <main>
        <!--
            Weird. Chromium (Chrome & new Edge) usually renders height 100%,
            but not height-responsive; sometimes renders scroll bar.
            Firefox always renders the scroll bar result.
        -->
        <div class="imgs">
            <img class="img100" src="https://imgur.com/ruE1EBV.jpg">
        </div>
        <div class="imgs">
            <img class="img100" src="https://imgur.com/ruE1EBV.jpg">
        </div>
        <div class="imgs">
            <img class="img100" src="https://imgur.com/ruE1EBV.jpg">
        </div>
        <div class="imgs">
            <img class="img100" src="https://imgur.com/ruE1EBV.jpg">
        </div>
    </main>

When opening this example, chromium-based browsers(Chrome, new Edge) usually render height 100%, the desired result, but it is not "height-responsive": the max height of the images remains fixed once the page is fully loaded. What even worse is, sometimes they give the stretched result with scrollbar; and Firefox always give me the stretched result with scrollbar, which is not what I want.

Try opening this S.O. page in Chromium & Firefox, and run the snippet. The results are different, too.

Chromium (almost always left, rarely right):

Firefox (always):

Any way to achieve what I want? The wrapping div and parent div may be something other than flexbox. I just want the images staying in the div, with width-responsive & height-responsive.

Also, any reason why Chromium browsers' rendering results are not consistent? Is my example missing something?

I know I can use the background image technique, so I can put image in div without changing layout at all. But I want only the image part clickable, so there must be an image element there corresponding to the clickable area.

background-image example:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    display: flex;
}
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: yellowgreen;
}
a {
    flex: 1;
    background-image: url('https://imgur.com/ruE1EBV.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border: 5px solid red;
}

<main>
    <a href="https://stackoverflow.com"></a>
    <a href="https://stackoverflow.com"></a>
    <a href="https://stackoverflow.com"></a>
    <a href="https://stackoverflow.com"></a>
</main>

Edit:

Equal row heights in flex-direction: column is okay when the content inside doesn't contain any images. I think the tricky part is the images. They just stretch...

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    display: flex;
}
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: yellowgreen;
}
.imgs {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px solid red;
}
.img100 {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

<main>
    <div class="imgs">
        hello
    </div>
    <div class="imgs">
        hello
    </div>
    <div class="imgs">
        hello
    </div>
    <div class="imgs">
        hello
    </div>
</main>

It could have to do with: https://stackoverflow.com/questions/47320518/equal-heights-in-flex-direction-column-without-setting-height but that's just a guess. It seems equal row heights in flex-direction: column is not supported officially. But if that's the case, it doesn't explain why it's working in Chrome. — Rosen Dimov, Jul 12 '20 at 17:16
The equivalent with grid layout would be to replace ```display: flex; flex-direction: column;``` on
with ```display: grid; grid-auto-rows: 1fr;``` — Rosen Dimov, Jul 12 '20 at 17:25
I just add an example of equal row heights using flexbox. But maybe it's not possible if there are images inside it. I'll try grid layout. Thanks. — Kirk, Jul 12 '20 at 17:30
I saw your edit with text instead of images. It SEEMS to work, but if the text is long enough (spanning several lines), it won't work fine e.g. if one row has 3 lines of text and the other 2, the latter one won't stretch to match the longer one. ;) — Rosen Dimov, Jul 12 '20 at 17:30
So it seems that flexbox doesn't shrink its content to keep the layout? It just grow... — Kirk, Jul 12 '20 at 17:32
Wait... I think I just found the answer. Just add `overflow: hidden` to `.imgs`, so it won't "grow", that is, overflow. — Kirk, Jul 12 '20 at 17:34

Kirk · Answer 1 · 2020-07-12T20:54:26.013

Well, I found an easy answer to fix this simple minimum example.

Just add overflow: hidden to .imgs, so images don't grow out of main.

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    display: flex;
}
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: yellowgreen;
}
.imgs {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.img100 {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

<main>
    <div class="imgs">
        <img class="img100" src="https://imgur.com/ruE1EBV.jpg">
    </div>
    <div class="imgs">
        <img class="img100" src="https://imgur.com/ruE1EBV.jpg">
    </div>
    <div class="imgs">
        <img class="img100" src="https://imgur.com/ruE1EBV.jpg">
    </div>
    <div class="imgs">
        <img class="img100" src="https://imgur.com/ruE1EBV.jpg">
    </div>
</main>

Applying this to my actual, much more huge layout did fix my layout. So all I need to do is to carefully inspect my overflows.

Why Chromium behaves differently: stackoverflow: Why do Chrome and Firefox show different flex layout results?

Make img in flexbox height 100% & responsive, inconsistent flexbox rendering result

1 Answers1