CODEWITHSUNDEEP
htmlcssflexbox
billy
billy

Reputation: 1493

Why aren't flex items growing equally in this div?

Any ideas?

Html

<div class="sec-3">
            <!-- iphone image  -->
        <div class="sec-3-flex">
        <!-- Iphone 1 image -->
            <picture>
                <!-- <source media="(min-width: 320px)" srcset="img/mobile/mobile-iphone-1.jpg"> -->
                          <source media="(min-width: 320px)" srcset="img/desktop/images/home_11.jpg">
                <img  id="iphone-2-img" src="img_orange_flowers.jpg" alt="Flowers" style="width:50%">
            </picture>
            <div class="sales-copy-wrap">
                <h3>Get organized with events, tasks and notes.</h3>
                <p class="sales-copy">Now more then ever it is critical for smart professionals to stay up to date with important deadlines.</p>
            </div>              
        </div>

    </div>

CSS

/* SECTION THREE */
.sec-3 {
    background-color: #f1eeee;
    margin-top: -22px;
}
.sec-3-flex {
    background-color: red;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;

 }
.sec-3-flex #iphone-2-img {
    padding-top: 30px;
    background-color: orange;   
    flex:1;

 }
.sec-3-flex .sales-copy-wrap {
    background-color: yellow;
    flex:1;
 }

Upvotes: 1

Views: 403

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371699

The scope of a flex formatting context is the parent-child relationship. Descendants of a flex container beyond the children are not flex items and will not accept flex properties.

More specifically, the flex property will work only when the parent element has display: flex or display: inline-flex.

In your code, .sec-3 has only one child, .sec-3-flex, and this child is not a flex item because the parent is not a flex container.

However. .sec-3-flex is a flex container. It has two flex items: picture and .sales-copy-wrap.

Only .sales-copy-wrap has flex: 1.

Add flex: 1 to picture if you want both siblings to be equal width.

Giving flex: 1 to the img child of picture does nothing because picture is not a flex container.

Upvotes: 1

Related Questions