如何在使用flex布局时通过JavaScript实现overflow:auto时的宽度拓展？

问题场景 #

当使用flex-direction: column的弹性布局容器，设置了max-width和overflow-x: auto后，容器内的长文本元素会直接撑大容器，突破max-width限制，无法触发横向滚动条（如图1）。我们需要实现容器保持指定宽度，内部长文本超出时显示横向滚动的效果（如图2）。

问题效果（图1） #

预期效果（图2） #

原问题代码 #

#testBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 200px;
  overflow-x: auto;
}

p {
  background: red;
}

<div id="testBox">
  <p>
    hihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihi
  </p>

  <p>
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  </p>
</div>

问题原因 #

在flex-direction: column的弹性布局中，flex子元素的默认min-width值为auto，这意味着子元素宽度会自动适配内容宽度，不受容器max-width限制，进而撑大容器，导致overflow-x: auto无法触发。

解决方法 #

只需通过以下两种方式之一，让子元素宽度被容器限制，即可触发横向滚动：

方案1：给容器添加align-items: flex-start #

修改后的CSS：

#testBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 200px;
  overflow-x: auto;
  align-items: flex-start; /* 新增 */
}

p {
  background: red;
  width: 100%; /* 让p元素占满容器宽度，超出部分滚动 */
}

方案2：给子元素设置min-width: 0 #

修改后的CSS：

#testBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 200px;
  overflow-x: auto;
}

p {
  background: red;
  min-width: 0; /* 新增 */
}

两种方案均能实现预期效果：容器保持max-width限制，内部长文本超出时显示横向滚动条。

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