flexbox父级小于浏览器大小的子元素

Question

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

请参阅代码段...然后将浏览器的大小(宽度方向)调整为小于粉红色框.应该出现滚动条.向后滚动到页面右侧,注意绿色背景小于粉红色区域,右侧有一个白点.

这么几个问题:

1. 为什么会这样？

2. 当调整浏览器大小而不在父级(或其他任何地方)设置显式宽度或使用时,如何防止父div的绿色背景小于粉红色框/ div overflow:hidden？

3. 是否有针对此问题的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项目不能小于其内容的大小.因此,虽然父级可以缩小,但弹性项目不能缩小超过文本的长度.这会导致溢出,从而导致下面的空白列.

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>

Answer 2

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>

请参阅w3schools的显示属性。