How to make an image fill a flexbox item?

Question

I have the following HTML that uses a flex container to house two divs, one containing an image (on the left) and the other one has some text:

<!DOCTYPE html>
<html>
<body>

<div id="wrapper" style="display:flex; background:pink;">

    <div id="image_div">
        <img src="http://i.imgur.com/MvnfA1U.png">
    </div>

    <div id="number_list">
        <h3>One</h3>
        <h3>Two</h3>
        <h3>Three</h3>
        <h3>Four</h3>
        <h3>Five</h3>
        <h3>Six</h3>
        <h3>Seven</h3>
    </div>

</div>
</body>
</html>

Which results in the following:

How do I get the image to increase in size and take the full height of its (pink) container, while:

Keeping the image adjacent to the text (only pushing as far right as it needs to go)
Maintaining the image's aspect ratio
Without cutting off part of the image
Without having text overlap the image
Keeping it generic (eg no specifying pixel lengths)

Thanks

@HemaNandagopal, this appears to make the divs of equal width, so now the number list is too far-right. The goal is to have the image div "just big enough" to house the image when it is at full size in its container — dismantle, Jul 03 '17 at 10:15
@dismantle posted an answer,let me know if there is any issue. — Hema Nandagopal, Jul 03 '17 at 11:08
Unfortunately this is still an unsolved issue being asked before in a question of mine. To solve this today, a script is needed. — Asons, Jul 03 '17 at 15:59

Manu Tyagi · Answer 1 · 2017-07-03T11:21:28.407

-2

    <!DOCTYPE html>
    <div id="wrapper" style="display:flex; background:pink;justify-content:space-between;">
    
        <div id="image_div">
            <img src="http://i.imgur.com/MvnfA1U.png" style="height:100%;">
        </div>
    
        <div id="number_list" style="width:50%">
            <h3>One</h3>
            <h3>Two</h3>
            <h3>Three</h3>
            <h3>Four</h3>
            <h3>Five</h3>
            <h3>Six</h3>
            <h3>Seven</h3>
        </div>
    
    </div>

edited Jul 03 '17 at 11:21

answered Jul 03 '17 at 10:19

Manu Tyagi

11
3

add jsfidle and some more info – Bilal Ahmed Jul 03 '17 at 10:50
no jsfiddle. THere is an SO snippet which is much better – Mihai T Jul 03 '17 at 11:02
Nope, won't work. Check dupe link, a question of mine, this is yet to be fixed within the browsers – Asons Jul 03 '17 at 16:13

How to make an image fill a flexbox item?

1 Answers1