使用 Flexbox 使子 div 宽度为具有 Overflow-x 的容器的 100%

Question

我正在尝试使具有溢出x内容的Flexbox容器的子div具有100％的溢出宽度，但我无法弄清楚它，进行了多次搜索，但找不到解决方案；

有人能帮我吗？

小提琴： https: //codepen.io/joaovtrc/pen/MWaaxKr

HTML：

<div class="test-container">

  <div class="test-item-overflow">

    overflowing contenttttttt

  </div>

  <div class="test-item-2"></div>

</div>

CSS：

.test-container {

  width: 1000px;

  height: 500px;

  margin: auto;

  background: black;

  display: flex;

  flex-direction: column;

  overflow-x: auto;

}

.test-item-overflow {

  width: fit-content;

  height: 55px;

  background: red;

  border: 1px solid yellow;

}

.test-item-2 {

  width: 100%;

  height: 55px;

  background: blue;

  border: 1px solid green;

}

我希望“test-item-2”（蓝色背景的那个）div 的宽度与红色那个 div 的宽度相匹配，但是请记住，红色框中的内容可能并不每次都完全相同，所以没有 calc( 100% + x) 具有固定参数...

Answer 1

当您为溢出 div 设置 时width: fit-content;，它会使宽度无法控制，因为它会随着该 div 中内容的增加而增长。一种解决方案可能是更改width: 100%;并添加overflow-x: scroll到类 .test-item-overflow 中。（请参阅下面代码片段中的更改）但是，如果您想保留width: fit-content;红色 div 并更改蓝色 div 的宽度以及红色 div 的宽度（取决于内容），您可以添加：document.getElementsByClassName("test-item-2").style.width = document.getElementsByClassName("test-item-overflow").offsetWidth + "px"。（在这种情况下，最好为div定义id并在js代码中使用getElementById）.test-container {&nbsp; width: 1000px;&nbsp; height: 500px;&nbsp; margin: auto;&nbsp; background: black;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; overflow-x: auto;}.test-item-overflow {&nbsp; width: 100%;&nbsp; overflow-x: scroll;&nbsp; height: 55px;&nbsp; background: red;&nbsp; border: 1px solid yellow;}.test-item-2 {&nbsp; width: 100%;&nbsp; height: 55px;&nbsp; background: blue;&nbsp; border: 1px solid green;}<div class="test-container">&nbsp; <div class="test-item-overflow">&nbsp; &nbsp; aaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&nbsp; </div>&nbsp; <div class="test-item-2"></div></div>

Answer 2

所以我真的建议你继续添加以下几行Margin:0px;这将占用您的内容和浏览器之间的所有空间Padding:0px;这将消除内容和内容边框之间的所有空间Overflow:hidden;最后，这应该删除溢出的内容。希望有帮助！

Answer 3

最好用display:grid;在.test-container. 之后，如果您不想在 2 个单元格之间留有间隙，这是由于.test-container { height: 500px; }.演示：html body {&nbsp; width: 100vw;&nbsp; height: 100vh;&nbsp; margin: 0px;&nbsp; overflow: auto;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; background: grey;}.test-container {&nbsp; width: 1000px;&nbsp; height: 500px;&nbsp; margin: auto;&nbsp; background: black;&nbsp; /*display: flex;&nbsp; flex-direction: column;*/&nbsp; display:grid;&nbsp; overflow-x: auto;}.test-item-overflow {&nbsp; width: 1500px;&nbsp; height: 55px;&nbsp; background: red;&nbsp; border: 1px solid yellow;}.test-item-2 {&nbsp; width: 100%;&nbsp; height: 55px;&nbsp; background: blue;&nbsp; border: 1px solid green;}<div class="test-container">&nbsp;&nbsp;&nbsp; <div class="test-item-overflow">&nbsp; &nbsp;overflowing contenttttttt&nbsp; </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="test-item-2"></div></div>