How Does Flexbox Affect the Behavior of Overflow-Wrap: Break-Word?

Flexbox Impacts on Overflow-Wrap Behavior

Flexbox's introduction to CSS elements can alter the behavior of overflow-wrap: break-word. When applied to an element with overflow-wrap: break-word, flexbox reorganizes it in a line by default.

However, the flexbox child property's default min-width is auto, which causes elements like a and b in our example to retain a minimum width based on their content. To eliminate the horizontal scrollbar, we can adjust the min-width property:

<code class="css">.b {
  min-width: 0;
}</code>

By setting min-width to 0, we enable the content to flow naturally, allowing line breaks to work as expected without triggering horizontal scrolling.

Here's a modified example for demonstration:

<code class="html"><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 fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal 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></code>

<code class="css">.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0;
}</code>

The above is the detailed content of How Does Flexbox Affect the Behavior of Overflow-Wrap: Break-Word?. For more information, please follow other related articles on the PHP Chinese website!