如何设置溢出父容器内元素的最大宽度？CSS实现咨询

当然可以通过CSS解决这个问题，以下是几种可行的方案：

方案1：给子元素设置max-width: 100% #

直接让所有子元素的最大宽度不超过容器的宽度，这样即便子元素自身设置了更大的宽度，也会被容器的max-width限制：

.test {
  height: 100px;
  max-width: 100%; /* 新增这一行 */
}

修改后，.test-two的500px宽度会被压缩到容器的最大宽度范围内，.test-one也不会被强制拉伸到超出容器的宽度。

方案2：调整容器的align-items属性 #

flex列布局默认的align-items: stretch会让子元素自动拉伸填满容器宽度，你可以将其改为flex-start或其他值，避免子元素被强制拉伸：

.container {
  display: flex;
  flex-direction: column;
  max-width: 200px;
  background-color: orange;
  overflow: auto;
  align-items: flex-start; /* 新增这一行 */
}

这种方式下，.test-one会根据自身内容自适应宽度，.test-two的500px宽度会超出容器，容器会出现横向滚动条，但不会拉伸.test-one。

方案3：给容器添加width: 100%约束 #

如果希望容器严格遵循max-width的限制，同时让子元素宽度受容器约束，可以给容器设置width: 100%（配合父元素的宽度限制），再结合子元素的max-width: 100%：

.container {
  display: flex;
  flex-direction: column;
  max-width: 200px;
  width: 100%; /* 新增 */
  background-color: orange;
  overflow: auto;
}

.test {
  height: 100px;
  max-width: 100%;
}

完整可运行示例 #

.container {
  display: flex;
  flex-direction: column;
  max-width: 200px;
  background-color: orange;
  overflow: auto;
}

.test {
  height: 100px;
  max-width: 100%;
}

.test-one {
  background-color: pink;
}

.test-two {
  width: 500px;
  background-color: red;
}

<div class="container">
  <div class="test test-one">Test one</div>
  <div class="test test-two">Test two</div>
</div>

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