set img flex-grow will override other flex child element

Question

following is my err code, first "text1" is override

       <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <!--mobile friendly-->
        <meta name="viewport" content="width=device-width, user-scalable=yes">
        <style>
            .it {
                display: flex;
                flex-direction: column;
                width: 100px;
                height: 100px
            }
    
            .it *:first-child {
                flex-grow: 1;
                background-color: pink;
            }
    
            .it img {
                object-fit: contain;
            }
        </style>
    </head>
    <body>
    <div class="it">
        <img src="https://i.stack.imgur.com/rtDch.jpg"/>
    <!--    <div>img1</div>-->
        <div>text1</div>
    </div>
    
    <div class="it">
        <img src="https://i.stack.imgur.com/rtDch.jpg"/>
    <!--    <div>img2</div>-->
        <div>text2</div>
    </div>
    </body>
    </html>

but I expect show img + img name text

I know I can set img height to make text show, but I still wanna find way to make fill flexbox rest space

following is my code img.jpg

Can you [edit] your question to make a snippet ? Because for me it's fine, such as the image is not showed... — Elikill58, Oct 20 '21 at 10:16
Hi. I updated my answer (based on the last information). Hope it helps. — Berci, Oct 20 '21 at 11:46

Berci · Answer 1 · 2021-10-20T11:53:26.890

To be 100% sure we would need an working example. But most likely the problem is that you give 100px to your container combined with flex-grow and probably an image at least 100x100 if not bigger.

My best guess is that the rendered image takes at least 100px height and the .it div overflows (pushing the text out of reach).

You have some options to deal with this. The easiest would be to give the image fixed height rather than the container (but the best solution depends a lot on what you need)

(or at least give it a maxheight of 100px - 1 line of text)

Can you also change from .it *:first:child to .it > img ? Be aware that .it *:first:child will also trigger for nested children (so <div class="it"><div><span>this will also be catched</span></div></div>)

EDIT: I think something like this is what you are searching for:

.it {
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 100px;
}

.it > div:first-child {
    display: flex;
    height: 0;
    flex: 1 1 0;
    justify-content: center;
    background-color: pink;
}
    
.it img {
    object-fit: contain;
}

<div class="it">
  <div>
    <img src="https://i.stack.imgur.com/rtDch.jpg"/>
  </div>
  <div>More text here</div>
  <div>text1</div>
</div>    
<div class="it">
  <div>
    <img src="https://i.stack.imgur.com/rtDch.jpg"/>
  </div>
  <div>text2</div>
</div>

Explication: In order to to force your image to only fill the remaining space wrap the image in a flex container and give it a height of 0. This way the other elements will definitely fill in the .it container space (since your image container has height 0). After give it flex-grow: 1 so it will grow to fill the remaining empty space (last 2 lines inside .it > div:first-child {...} are, of course, optional)

set img flex-grow will override other flex child element

1 Answers1