Flexbox影响溢出包装行为 [英] Flexbox affects overflow-wrap behavior

问题描述

查看此代码段. overflow-wrap: break-word应该这样工作:

Look at this snippet. This is how the overflow-wrap: break-word should work:

.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如何更改其行为:

And now see how change its behavior in combination with 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>

如何编辑第二个片段以不显示水平滚动条? (不使用溢出:隐藏)

How to edit the second snippet to not showing horizontal scrollbar? (Without use of overflow: hidden)

谢谢

推荐答案

将display: flex赋予wrap时，默认情况下，元素a和b在一条线.

When you give display: flex to the wrap, by default the elements a and b are flexed in a line.

现在， flexbox子的另一个默认值是min-width属性默认情况下为 auto ，因此元素a和b取一个min-width与其内容相对应.因此，将min-width: 0设置为 normal 即可-参见下面的演示:

Now another default of a flexbox child is the min-width property is auto by default and so the elements a and b takes a min-width corresponding to its content. So set min-width: 0 and things go back to normal - see demo below:

.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影响溢出包装行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！