Flexbox行布局中子元素设为全屏被压缩，列布局正常的原因？

安全阿岳

2026-7-19

问题描述

我想要制作一个横向滚动网站，因此使用了以下代码：

HTML代码：

<div class="flexParent">
        <div class="flexChild"></div>
        <div class="flexChild"></div>
</div>

CSS代码：

.flexParent {
  display: flex;
}

.flexChild {
  height: 100vh;
  width: 100vw;
}

但这会导致屏幕被分成两部分，每个div仅获得50vw宽度。不过当我将.flexParent修改为：

.flexParent { 
  display: flex; 
  flex-direction: column;
  overflow-x: scroll;
}

此时另一个div会被渲染到下一页，每个子元素分别保留100vh高度和100vw宽度，需要向下滚动。为什么flex-direction: row时不会出现这种情况？

原因分析及解决方案

核心原因：Flex布局的主轴缩放规则

Flex布局的行为差异源于主轴方向的默认缩放逻辑：

当flex-direction: row（默认方向）时，容器主轴为水平方向。Flex子元素默认的flex-shrink属性值为1，意味着只要容器宽度不足以容纳所有子元素的总宽度，子元素就会自动等比例缩小，强行适配容器宽度。你的两个.flexChild总宽度是200vw，远超过视口宽度，因此被压缩到各占50vw。
当flex-direction: column时，容器主轴为垂直方向，此时Flex的缩放规则只作用于垂直方向（主轴），子元素的宽度属于交叉轴维度，不受缩放影响，因此能保持100vw的设置；而垂直方向总高度达到200vh，超出容器高度，自然出现纵向滚动。

实现横向滚动的正确写法

要让row方向实现横向滚动，只需阻止子元素的水平缩放，并给容器添加横向滚动属性：

.flexParent {
  display: flex;
  overflow-x: auto; /* 内容超宽时显示横向滚动条 */
}

.flexChild {
  height: 100vh;
  width: 100vw;
  flex-shrink: 0; /* 禁止子元素在水平方向缩小 */
}