在开发过程中出现了一个问题，就是容器里用栅栏布局格式，顶满了容器，然后顶部还有一个容器，这样的话，由于内容宽高超过了容器宽高，页面的宽度会被强行扩展，解决这个问题的记录如下：

方法1：overflow允许滚动

因为我一开始想的是栅栏布局的容器和顶部容器共享父容器的高度，栅栏容器的高度适配剩余的高度，但是发现好像不管用，于是我想到了强行控制栅栏布局的容器大小。

默认情况下，CSS 设置 overflow 的值为 visible，这意味着即使内容超出了其容器的边界，它仍然会被显示出来。这可以导致看起来容器尺寸没有正确限制其内部元素，特别是在使用 Flexbox 布局时，这种效果会更加明显。

不过当设置 overflow: auto; 时，浏览器会检查容器内的内容是否超出了其边界。如果超出，浏览器会自动添加滚动条以允许用户滚动查看隐藏的内容。这不仅保持了页面的整洁，还确保了布局不会因为内容溢出而破坏。

.layer.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1; /* 使得这个元素填满所有可用的剩余空间 */
    width: 100%; /* 确保宽度只是占满容器宽度，不超出 */
    overflow: auto; /* 如果内容过多，允许滚动 */
}

方法2：控制容器的整体所占比例

因为我写的样式是顶宽的，容器里一行会有3张卡片，会占满父容器的宽度，高度自适应，这样会避免让图片变形；当然也可以设置容器宽度，然后高度自适应，在宽度百分比合适的情况下，也能空出顶部容器的高度，从而避免页面被强行扩展。

我直接取消了固定的栅栏布局，让宽度自适应，这样子也是可行的：

参考资料：

在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了-css中常见问题及解决办法 (51cto.com)