flex 项目包装时内容消失答案

【问题标题】：content disappears when flex item wrapsflex 项目包装时内容消失
【发布时间】：2016-10-05 19:07:46
【问题描述】：

考虑以下简单的弹性盒设计：

#a {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.b {
  flex: 1;
  min-width: 200px;
  overflow: hidden;
}

<div id="a">
  <div class="b">
    Hello1
  </div>
  <div class="b">
    Hello2
  </div>
</div>

当窗口的宽度缩小到 ~400px 以下时，包含“Hello2”的右侧 div 会跳到另一个下方。这正是我所针对的行为。

但是，如果 Hello1 被替换为非常长的内容，则该机制不再起作用。相反，另一个 div 完全消失了。

有人知道如何解决这个问题吗？请参阅此小提琴以获取完整示例：

更新：

这是一个更新的小提琴，应该使问题更加透明：https://jsfiddle.net/yrLjbhmx/7/

【问题讨论】：

在您的 JSFiddle 中，我看到第二个框被推到第一个框下方，正如您所描述的那样。也许我误解了这个问题？
我认为最好这样描述：用简短的文本替换小提琴中的许多 hellos 并查看调整大小的行为。我希望在长文本中看到相同的内容，只是溢出消失了。换句话说：第二个内部 div 中的文本应该始终可见..
@AntonHarald 所以你想让盒子有一定的高度？
是的，容器永远不应该增长......
@AntonHarald 也许您可以为第一个 div hello 1 添加自定义滚动或隐藏溢出-y，但您还需要为 .b 类或第一个 div 设置最大高度

标签： html css flexbox

【解决方案1】：

第一个技巧：只需将 b 类中的 min-width 替换为 max-width

#a {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

}

.b {
  flex: 1;
  max-width: 200px;
  border: 1px solid red;
  /*jsut add this for better view*/
}

<div id="a">
  <div class="b">
Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1
Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1
Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1
Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1
Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1
  </div>
  <div class="b">
Hello2
  </div>
</div>

第二个技巧：使用 nth:child 让这个不知道它是否对你有帮助。我还评论了我更改的 css 以及原因。现在，如果屏幕缩小 ~400px，hello 2 不会消失（在屏幕尺寸宽度 389px 和高度 240px 上测试）LiveOnFiddle

#a {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

}

.b {
  flex: 1;
  min-width: 200px;
  border: 1px solid red;
  /*jsut add this for better view*/
}

div.b:nth-child(1) {
  overflow-y: scroll;
  /*you can set hidden also*/
  height: 200px;
  /*you can set this on .b class*/
  border: 1px solid green;
  /*jsut add this for better view*/
}

<div id="a">
  <div class="b">
Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1
Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1
Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1
Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1
Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1 Hello1
  </div>
  <div class="b">
Hello2
  </div>
</div>

【讨论】：