flex设置white-space: nowrap后子元素宽度不生效如何解决？

方案1：基于Flex布局实现（推荐） #

问题原因 #

Flex布局默认flex-shrink: 1，子元素总宽度超出容器时会自动压缩宽度适配，导致设置的50%宽度失效，不会触发溢出。

修复代码 #

只需要给Flex子元素添加flex-shrink: 0，禁止自动收缩即可：

div.container {
  overflow: hidden;
  width: 480px;
  margin: 24px 0;
}

div.list {
  overflow: auto;
}

div.flex-list {
  display: flex;
}

div.list div {
  white-space: normal;
  width: 50%;
  flex-shrink: 0; /* 禁止flex自动收缩，让宽度设置生效 */
  outline: 1px solid white;
  background: #eee;
}

HTML结构不需要修改，修改后子元素会保持等高，总宽度超出容器时自动触发横向滚动，完全符合需求。

方案2：inline-block子元素实现等高 #

如果要保留inline-block的原有实现，可以借助CSS表格布局特性实现同行等高：

div.container {
  overflow: hidden;
  width: 480px;
  margin: 24px 0;
}

div.list {
  overflow: auto;
}

div.block-list {
  display: table; /* 开启表格布局 */
  table-layout: fixed; /* 固定列宽模式，按设置的width分配列宽 */
  white-space: nowrap;
}

div.block-list div {
  display: table-cell; /* 替换inline-block为table-cell */
  vertical-align: top;
}

div.list div {
  white-space: normal;
  width: 50%;
  outline: 1px solid white;
  background: #eee;
}

修改后inline-block的子元素会自动保持同行等高，同时保留原有溢出滚动的特性。

内容的提问来源于stack exchange，提问作者Toni Michel Caubet