Flexbox 影响溢出包装行为

Question

看看这个片段。 overflow-wrap: break-word 应该是这样工作的：

.wrap{
   overflow-wrap: break-word;
}

<div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal 
  </div>
</div>

现在看看如何结合 display:flex 改变它的行为：

.wrap{
   overflow-wrap: break-word;
   display: flex;
}

<div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal 
  </div>
</div>

如何将第二个片段编辑为不显示水平滚动条？（不使用溢出：隐藏）

谢谢

Answer 1

当您将 display: flex 赋给 wrap 时，默认情况下元素 a 和 b 是 flexed行。

现在 flexbox child 的另一个默认值是 min-width 属性默认情况下是 auto 等等元素 a 和 b 采用与其内容相对应的 min-width。所以设置 min-width: 0 然后事情回到正常 - 请参见下面的演示：

.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0; /* ADDED */
}

<div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div>

Flexbox 影响溢出包装行为

Flexbox affects overflow-wrap behavior

html

css

overflow

flexbox