浏览器上小于子元素的flexbox父元素调整大小[重复]

Question

为什么在狭窄的屏幕上，父母比孩子小？

请参阅代码段。。。然后调整浏览器的大小（宽度方向），使其小于粉红色框。滚动条应该出现。在页面上向右滚动，注意绿色背景比粉色区域小，并且右侧有一个白点。

问题太少了：

>

为什么会这样？

当浏览器调整大小时，我如何防止父div的绿色背景变得比粉红色框/div小，而不在父div（或其他任何地方）上设置显式宽度或使用overflow：隐藏？

这个问题有flexbox解决方案吗？

谢谢

托马斯

.parent {
  height: 400px;
  background-color: green;
  display: flex;
}

.item {

  height: 100px;
  background-color: pink;
  padding: 10px;
}

<div class="parent">
  <div class="item">looooooooooooooooooooooooooooong</div>
  <div class="item">looooooooooooooooooooooooooooong</div>
</div>

Answer 1

>

它会发生，因为你的。父是一个普通的块元素（flex也是一个块级容器），并且它是用宽度初始化的：自动；，在你的例子中是视口的宽度。所以向右滚动会显示空白，因为div的宽度小于整个可滚动区域。

您可以通过设置来实现这一点。父元素到内联元素，内联元素将响应其子元素的宽度。

是的，只需在.父上使用show： inline-flex；。

.parent {
  height: 400px;
  width: 100%;
  background-color: green;
  display: inline-flex;
}

.item {
  flex: 1;
  height: 100px;
  background-color: pink;
  padding: 10px;
}

<div class="parent">
  <div class="item">looooooooooooooooooooooooooooong</div>
  <div class="item">looooooooooooooooooooooooooooong</div>
</div>

Answer 2

默认情况下，弹性项不能小于其内容的大小。因此，虽然父项可以收缩，但弹性项不能收缩超过文本的长度。这会导致溢出，并导致下面的空白列。

弹性项目的初始设置为minwidth:auto。要使每个项目都留在容器内，请切换到minwidth:0。

.parent {
  height: 400px;
  background-color: green;
  display: flex;
}

.item {
  height: 100px;
  background-color: pink;
  padding: 10px;
  min-width: 0;   /* NEW */
}

<div class="parent">
  <div class="item">looooooooooooooooooooooooooooong</div>
  <div class="item">looooooooooooooooooooooooooooong</div>
</div>