html flex容器样式求解

Question

<div class="container" style="flex: 1 0 auto; display: flex; justify-content: center; background-color: blue; height: 300px;">
        <div class="mainbox" style="display: flex; width: 1150px; height: 100%; background-color: #fff;">
            <div class="content" style="width: 930px; flex: 1 1 auto;background-color: pink;">
                <div class="articles" style="display: flex;background-color: #fff; padding: 20px 50px;">
                    12321213213
                </div>
            </div>

        </div>
    </div>

我在最内层随便敲了一些数字。

我想问的是，这段代码在浏览器视口宽度小于930px的时候，为什么会出现padding内边距被吞并且同时出现滚动条呢？当更小的时候，左边的内边距直接降为0px，甚至内容也被吞并。

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ
在浏览器视口宽度小于930px时，你设置的.content元素的width为930px，而内层的.articles元素的padding为20px 50px，加上.articles元素的宽度，超过了.content元素的宽度，导致.articles元素溢出，所以会出现滚动条。
·
此外，当.content元素的flex-grow属性值为1时，表示在剩余空间中尽量占用更多的空间，同时，当.content元素的flex-shrink属性值为1时，表示在空间不足时尽量缩小元素，这也是为什么在浏览器视口宽度小于930px时，.content元素会缩小的原因。同时，由于.articles元素的宽度超过了.content元素的宽度，导致左侧的内边距被吞并。

如果想要解决这个问题，可以尝试以下几种方法：

1. 将.content元素的width设置为100%，这样就不会出现溢出的问题。

2. 调整.articles元素的宽度，使其不会超过.content元素的宽度。

3. 调整.content元素的flex-grow和flex-shrink属性值，使其更加合适，不会在浏览器宽度较小时出现问题。

希望以上建议对你有所帮助。