为什么 display：flex 使 div 在浏览器检查器中小于 100% 的父级宽度？-解网

问：

我对 Chrome 的浏览器/开发工具检查器如何突出显示 div 的宽度有点困惑：

在以下代码中，（黄色）在检查器关闭的情况下直观地显示为 100% 宽度（浅蓝色），但是，当我检查（黄色）时，我看到：.siteFooter_upperFooterFlex__Ut3VI.siteFooter_upperFooterContent__Jt8SZ .siteFooter_upperFooterFlex__Ut3VI

为什么检查器没有显示黄色背景颜色达到全宽，即 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>

CSS Flexbox 铬

这似乎是 Chromium 开发工具实现的一个怪癖;我想是 Chromium 试图提供帮助。开发工具会显示子元素占用了多少弹性项的宽度，以及弹性布局（左右边缘的蓝紫色框）“填充”了多少。请注意，我在这里指定了 Chromium，而不仅仅是 Chrome;其他 Chromium 浏览器（如 Edge）似乎也具有此“功能”。

将鼠标悬停时，请注意显示的宽度量（对于屏幕截图，为 1157 像素）大于每个子容器加在一起的宽度。

Firefox 中的开发工具没有做出这样的区分，只是显示 flex 项目有效占用了多少空间（即全宽）。

上一个：在 Falkon 浏览器上支持现代 CSS 功能吗？

下一个：这个 Chromium devtools z-index 弹出窗口是否提供了错误/过时的建议？

为什么 display：flex 使 div 在浏览器检查器中小于 100% 的父级宽度？

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

评论