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会在一行中 弯曲 。

现在的另一个默认 Flexbox的孩子 是min-width属性 自动 默认等要素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>