Why is the width of an img element not considerd in the layout with flexbox?

Question

I have found the Answer here how to force a container to be square with an variable unknown height with the help of an image. (Css width the same as height with unknown height) The Image proportions are the key here. (in the example a 1x1 transparent gif is used.)

I tried to replicate this approach in an child element of an flexbox column design. But found that there the width of the image is not taken into account for the width of the parent. i used a 10x10 pixel half-transparent png with an radial color-gradient - so its easy to see if the img is square.

'original' linked method with an image (without flex)

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: hsla(0, 100%, 90%, 0.3);
    font-size: 0.6em;
    






}

section {
    background-color: hsla(100, 100%, 50%, 0.5);

    margin: 0.2em;
    padding: 0.5em;







}

section:last-of-type {
    background-color: hsla(200, 100%, 75%, 0.5);
}

.content_wrapper {
    background-color: hsla(260, 100%, 50%, 0.5);
    height: 40%;
    display: inline-block;
}

.my_content {
    background-color: hsla(200, 100%, 50%, 0.5);
    position: relative;
    height:100%;
    width:100%;
}

img {
    display:block;
    height:100%;
    width:auto;
}

.my_content_text {
    background-color: hsla(50, 100%, 50%, 0.5);
    position: absolute;
    top: 1em;
    bottom: 1em;
    left: 1em;
    right: 1em;
    /* height:100%; */
    /* width:100%; */
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Square?</title>
</head>
<body>
    <section>
        content...
    </section>
    <section class="content_wrapper">
        <div class="my_content">
            <img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAvUlEQVQYlZWQIQ7EIBREf1KL5wD0HBzgJy0ChekBIDV4zLd1TdoTcAAMZl3PAQeor23SVbtZyYpR85LJPHgAhk8uxvTJuTk5Nxdj+reDB2C4u26sQkyHlC4j+ozoDyldFWK6u278glWIKSP6zVqiEBYKYdmspYzoqxDTAzDAxZg+pHSbtTSv665SiiqlOK/rvllLh5TuYkzDybnJiJ5CWFRKsS/l1ZfyUilFCmHJiP7k3LSDzdPNZ/7S0yL8DUw/qLGbP6n9AAAAAElFTkSuQmCC">
            <div class="my_content_text">
                is this square?
            </div>
        </div>
    </section>
    <section>
        more content...
    </section>
</body>
</html>

same with an surrounding flex column layout:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: hsla(0, 100%, 90%, 0.3);
    font-size: 0.6em;
    
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
    align-content: center;
}

section {
    background-color: hsla(100, 100%, 50%, 0.5);

    margin: 0.2em;
    padding: 0.5em;

    order: 0;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    align-self: auto;
}

section:last-of-type {
    background-color: hsla(200, 100%, 75%, 0.5);
}

.content_wrapper {
    background-color: hsla(260, 100%, 50%, 0.5);

    flex-grow: 1;
}

.my_content {
    background-color: hsla(200, 100%, 50%, 0.5);
    position: relative;
    height:100%;
    width:100%;
}

img {
    display:block;
    height:100%;
    width:auto;
}

.my_content_text {
    background-color: hsla(50, 100%, 50%, 0.5);
    position: absolute;
    top: 1em;
    bottom: 1em;
    left: 1em;
    right: 1em;
    /* height:100%; */
    /* width:100%; */
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Square?</title>
</head>
<body>
    <section class="lightblue">
        content...
    </section>
    <section class="content_wrapper">
        <div class="my_content">
            <img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAvUlEQVQYlZWQIQ7EIBREf1KL5wD0HBzgJy0ChekBIDV4zLd1TdoTcAAMZl3PAQeor23SVbtZyYpR85LJPHgAhk8uxvTJuTk5Nxdj+reDB2C4u26sQkyHlC4j+ozoDyldFWK6u278glWIKSP6zVqiEBYKYdmspYzoqxDTAzDAxZg+pHSbtTSv665SiiqlOK/rvllLh5TuYkzDybnJiJ5CWFRKsS/l1ZfyUilFCmHJiP7k3LSDzdPNZ/7S0yL8DUw/qLGbP6n9AAAAAElFTkSuQmCC">
            <div class="my_content_text">
                square?
            </div>
        </div>
    </section>
    <section>
        more content...
    </section>
</body>
</html>

so somehow i think i am missing something obviously..

Why is the width of the flex-item (class name 'content_wrapper') or its child (class name 'my_content') not as width as the image?!

(I have only tested this in Firefox currently.. this is the only one iam using currently.. - its an in-house experiment..)

second source for the width based on height technique: https://stackoverflow.com/questions/29677792/set-width-according-to-height — Stefan Krüger s-light, Apr 05 '18 at 11:58
Flex-item? Please be more specific like refer to the elements with their classNames. — zer00ne, Apr 05 '18 at 12:02
i added the class names of the elments i was meaning - i hope its now clearer?! — Stefan Krüger s-light, Apr 05 '18 at 13:48

Why is the width of an img element not considerd in the layout with flexbox?

0 Answers0