Question

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

#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/

Answer 1

1st Tricks：只需将b中的min-width替换为max-width

＆＃13;

#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*/
}

＆＃13;

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

＆＃13;

＆＃13;
第二招：使用第n个：让孩子知道这个不知道它对你有帮助。我还评论了css我改变的地方和原因。现在，如果屏幕缩小~400px，则问候2不会消失（在屏幕尺寸宽度389px和高度240px上测试）LiveOnFiddle

＆＃13;

#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*/
}

＆＃13;

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

＆＃13;

Flex项目换行时内容消失

1 个答案: