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在行中是 flexible 。

现在， flexbox子级的另一个默认值是min-width属性默认为 auto ，因此元素a和{{1} }接受与其内容相对应的b。因此，将min-width设置为 normal 即可-参见下面的演示

min-width: 0

.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0; /* ADDED */
}

Flexbox影响溢出包装行为

1 个答案: