使用Flexbox使子div在容器中溢出时宽度占满100%。

Question

我想让 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）...

- João Vitor Romero da Cruz

---

我想让具有蓝色背景的“test-item-2” div与红色div在宽度上匹配，您是指高度吗？ - Rainbow

@ZohirSalak 不，我的意思是宽度，我希望蓝色框的宽度与红色框相匹配，并且仍然具有溢出内容。 - João Vitor Romero da Cruz

默认情况下，<div> 元素的 display 属性为块级元素，因此它将与其父元素的宽度匹配，只要您不更改 display 属性，这个要求就是隐含的。 - Rainbow

@ZohirSalak 我移除了 display: flex，但是蓝色方块仍然无法与红色方块的宽度匹配... - João Vitor Romero da Cruz

因为您使用了 width: fit-content;，这也会防止您想要的滚动条出现。如果您想让蓝色匹配 res，请从父级中删除 width: 1000px; 并添加 display:inline-flex，这也将防止滚动条的出现。 - Rainbow

Answer 1

当您为溢出的div设置了width: fit-content;，随着该div中内容的增加，它的宽度变得不可控。一种解决方法是将width: 100%;更改为在类.test-item-overflow中添加overflow-x: scroll。(请参见下面代码片段中的更改)

然而，如果您想保留红色div的width: fit-content;并根据内容更改蓝色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>

- BeHFaR

---

谢谢您的回答！是的，我在寻找一种不使用 JavaScript 的方法来实现这个，但我想这是让蓝色框匹配红色框唯一的方式了…如果有人知道如何仅使用 CSS 来实现这一点，请随意回答这个问题… - João Vitor Romero da Cruz

Answer 2

最好在 .test-container 上使用 display:grid;。如果您不想在 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>

- MaxiGui

Answer 3

所以我真的建议你继续添加以下几行代码

Margin:0px;

这将消除您的内容和浏览器之间的所有空格

Padding:0px;

这将消除您的内容和内容边框之间的所有空格

Overflow:hidden;

最后，这应该会删除溢出的内容。

希望有所帮助！

- Joseph Attia

---

谢谢你的回答，但那不是我想要的。我想保持红盒子的宽度，并使蓝盒子动态匹配红盒子的宽度！ - João Vitor Romero da Cruz

你的意思是让这些框重叠吗？ - Joseph Attia