如何设置溢出父级内元素的最大宽度？

Question

我在容器内有两个项目，其最大宽度设置为 250px，这两个项目是动态的，在我的示例中，第二个项目的宽度为 500px（设置为显示问题），第一个项目必须扩展到 500px，因为这第二个元素。 CSS 中可以吗？

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

.test {
  height: 100px;
}

.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>

Answer 1

据我了解，这就是您正在寻找的。

您需要在子元素而不是父元素上应用溢出属性。

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

.test {
  height: 100px;
}

.test-one,
.test-two {
  max-width: 200px;
  overflow: auto;
}

.test-one {
  background-color: pink;
  width: 300px;
}

.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 the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog</div>
</div>