Flexbox影响溢出包装行为

一尘不染

Flexbox影响溢出包装行为

html

看一下这段代码。这是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>

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

谢谢

阅读 333

2020-05-10

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

2020-05-10