Flexbox中Div的假设尺寸与流布局实际尺寸为何存在差异？

这是Flexbox的默认特性导致的，核心原因在于flex子项的flex-shrink属性默认值为1，具体拆解如下：

• 流布局中的块级元素（第一个.item）：块级元素在无容器宽度限制时，若设置了明确的width:2000px，会直接使用该宽度，哪怕超出浏览器视口，这是流布局的正常表现。
• Flex容器中的子项（第二个.item）：
  1. .flex-wrapper作为块级容器，默认宽度是100%父容器宽度（即浏览器视口宽度），你没设置它的宽度，它就会遵循这个规则。
  2. Flex子项默认的flex-shrink:1意味着：当子项总宽度超过容器宽度时，子项会自动按比例缩小，以适配容器的可用空间。
  3. 你的.item设置了width:2000px，远大于容器的视口宽度，所以它会被自动缩小到容器的宽度范围内。

如果想让Flex子项保持预设的2000px宽度，可采用以下两种方法之一：

• 给子项设置flex-shrink:0，关闭自动缩小特性：

  .item {
    width: 2000px;
    height: 50px;
    background-color: aqua;
    flex-shrink: 0;
  }
  

• 给Flex容器设置flex-wrap:wrap，让子项换行而非缩小：

  .flex-wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  

补充：Flex布局的核心是让容器能灵活调整子项的尺寸与排列，默认的收缩规则是为了让子项尽可能适配容器空间，避免不必要的溢出。

内容的提问来源于stack exchange，提问作者user21998780