在浏览器调整大小时，柔箱父元素小于子元素

Question

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

看片段..。然后调整浏览器的大小(按宽度排列)，使其小于粉红色框。滚动条应该出现。在页面上向右滚动，注意绿色背景比粉红色区域小，右边有一个白点。

​

​

很少有问题：

1. 为什么会发生这种事？
2. 当浏览器调整大小时，如何防止父div的绿色背景比粉红框/div变小，而没有在父(或其他任何地方)上设置显式宽度或使用overflow:hidden
3. 这个问题有柔性箱解决方案吗？

谢谢,

托马斯

​

.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

1. 之所以会发生这种情况，是因为您的.parent是一个普通的块元素(flex也是一个块级容器)，并且是用width:auto;初始化的，在您的例子中，这是视图端口的宽度。因此，向右滚动将显示空白，因为您的div的宽度小于整个可滚动区域。
2. 为此，可以将.parent设置为内联元素，该元素将响应其子元素的宽度。
3. 是的，只需在display: inline-flex;上使用.parent即可。

​

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

​

见 on MDN。

Answer 2

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

flex项的初始设置是min-width: auto。为了使每个项目都停留在容器中，切换到min-width: 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>

​

现在粉红色的盒子不再溢满容器了。

然而，文本现在已经满是粉红色的盒子了。

这个问题没有为文本指定行为，但有一个可能的解决方案：

​

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

.item {
  height: 100px;
  background-color: pink;
  padding: 10px;
  min-width: 0;            /* NEW */
  text-overflow: ellipsis; /* NEW */
  white-space: nowrap;     /* NEW */
  overflow: hidden;        /* NEW */      
}

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

​