Search code examples
cssflexboxchromium

Why does display:flex make the div becomes less than 100% width of parent in the browser inspector?

I'm a bit confused with how Chrome's browser/dev tools inspector is highlighting the width of a div:

In the following code, .siteFooter_upperFooterFlex__Ut3VI (yellow) visually displays as 100% width of .siteFooter_upperFooterContent__Jt8SZ (light-blue) with the inspector closed, however, when I inspect .siteFooter_upperFooterFlex__Ut3VI (yellow), I see:

screenshot of the content view in Chrome highlighted via selecting the code in the browser dev tools. Diagonal dashed boxes are shown on left and right edges of the content.

Why doesn't the inspector show the yellow background color reaching the full width, which is 100%?

.siteFooter_upperFooterContent__Jt8SZ {
    position: relative;
    z-index: 20;
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: lightblue;
}
.siteFooter_upperFooterFlex__Ut3VI {
    display: flex;
    align-items: stretch;
    justify-content: center;
    background-color: yellow;
}
.siteFooter_separatorWrap___XQCE {
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px) {
.siteFooter_upperFooterLeft__0MGuC {
    width: 35%;
    padding-left: 4rem;
    padding-right: 4rem;
}
.siteFooter_upperFooterRight__FGTWq {
    display: flex;
    width: 35%;
    flex-direction: column;
    padding-left: 4rem;
    padding-right: 4rem;
}
}
<div class="siteFooter_upperFooterContent__Jt8SZ">
    <div class="siteFooter_upperFooterFlex__Ut3VI">
        <div class="siteFooter_upperFooterLeft__0MGuC">
            <div class="siteFooter_upperFooterTextWrap__Pn_No">
                <p class="siteFooter_upperFooterText__ofee9">Quisque varius libero sit amet nisl blandit dictum.</p>
            </div>
            <div class="siteFooter_upperFooterButton__1p9RV"><a class="buttonLink_black__TlKdt"
                    href="/contact/sales/">Talk to Us</a></div>
        </div>
        <div class="siteFooter_separatorWrap___XQCE">
            <div class="siteFooter_separator__NRxtG"></div>
        </div>
        <div class="siteFooter_upperFooterRight__FGTWq">
            <div class="siteFooter_upperFooterTextWrap__Pn_No">
                <p class="siteFooter_upperFooterText__ofee9">Quisque varius libero sit amet nisl blandit dictum.</p>
            </div>
            <div class="siteFooter_upperFooterButton__1p9RV"><a class="buttonLink_white__zKdgU"
                    href="https://sandbox.mandoemedia.com/sandbox-wizard">Quisque varius libero sit amet nisl blandit dictum.</a></div>
        </div>
    </div>
</div>

Solution

  • This appears to be a quirk of Chromium's dev tools implementation; I suppose it is Chromium trying to be helpful. The dev tools are showing you how much of the flex item's width is taken up by the child elements vs how much is 'padded' by the flex layout (the blueish purple boxes on the left and right edges). Note that I've specified Chromium here, not just Chrome; other Chromium browsers like Edge appear to have this "feature", too.

    When you hover, note that the width amount shown (for your screenshot, that's 1157px) is more than the width of each child container added together.

    The dev tools in Firefox do not make such a distinction and just show you how much space the flex item effectively takes up (which is the full width).