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

Question

我正在尝试使具有溢出x内容的Flexbox容器的子div具有100％的溢出宽度，但我无法弄清楚它，进行了多次搜索，但找不到解决方案；有人能帮我吗？小提琴： https: //codepen.io/joaovtrc/pen/MWaaxKrHTML：<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 {

  width: 1000px;

  height: 500px;

  margin: auto;

  background: black;

  display: flex;

  flex-direction: column;

  overflow-x: auto;

}

.test-item-overflow {

  width: 100%;

  overflow-x: scroll;

  height: 55px;

  background: red;

  border: 1px solid yellow;

}

.test-item-2 {

  width: 100%;

  height: 55px;

  background: blue;

  border: 1px solid green;

}

<div class="test-container">

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

    aaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

  </div>

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

  width: 100vw;

  height: 100vh;

  margin: 0px;

  overflow: auto;

  display: flex;

  align-items: center;

  background: grey;

}

.test-container {

  width: 1000px;

  height: 500px;

  margin: auto;

  background: black;

  /*display: flex;

  flex-direction: column;*/

  display:grid;

  overflow-x: auto;

}

.test-item-overflow {

  width: 1500px;

  height: 55px;

  background: red;

  border: 1px solid yellow;

}

.test-item-2 {

  width: 100%;

  height: 55px;

  background: blue;

  border: 1px solid green;

}

<div class="test-container">

  

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

   overflowing contenttttttt

  </div>

  

  

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

</div>