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

【问题标题】：flexbox parent smaller than child elements on browser resize [duplicate]flexbox父级小于浏览器调整大小的子元素[重复]
【发布时间】：2016-12-20 14:43:45
【问题描述】：

为什么在窄屏上父母比孩子小？

查看 sn-p... 然后将浏览器的大小（宽度方向）调整为小于粉红色框。滚动条应该出现。滚动回到页面右侧，注意绿色背景小于粉红色区域，右侧有一个白点。

这么几个问题：

为什么会这样？
当调整浏览器的大小没有在父级（或其他任何地方）上设置显式宽度或使用overflow:hidden?
这个问题有弹性盒解决方案吗？

谢谢，

托马斯

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

【问题讨论】：

标签： html css flexbox

【解决方案1】：

它发生了，因为你的.parent 是一个普通的块元素（flex 也是一个块级容器）并且用width:auto; 初始化，在你的例子中是视口的宽度。所以向右滚动会显示空白，因为您的 div 的宽度小于整个可滚动区域。
您可以通过将 .parent 设置为内联元素来实现这一点，该元素将响应其子元素的宽度。
是的，只需在.parent 上使用display: 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>

见display on MDN。

【讨论】：

我现在非常爱你 :) 谢谢。这让我发疯了。
我想补充一点，inline-flex 折叠父项以匹配子项，但如果您希望父项为全宽，请将 min-width: 100% 添加到父项。见codepen.io/_thomas/pen/vKbkXZ我试过 width: 100% 还是不行。
只需将flex:1; 添加到.item - 答案更新为width:100%。
为什么投反对票？亲爱的投票者，请解释我的回答在哪里不正确或具有误导性。
代码 sn-p 仍然悬在绿色框上...

【解决方案2】：

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

弹性项目的初始设置是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>

【讨论】：