How Does Flexbox Affect `overflow-wrap: break-word` Behavior?

Flexbox's Impact on Overflow-Wrap

In the realm of CSS, the properties overflow-wrap and display interact to govern the behavior of text wrapping and overflowing content. Let's explore an interesting quirk observed in a specific scenario.

Consider the following code snippet:

<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 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></code>

With overflow-wrap: break-word applied, the text within the second div, .b, should break into multiple lines, as demonstrated in the first snippet.

However, things take an unexpected turn when we add display: flex to the wrap container:

<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 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></code>

In this scenario, a horizontal scrollbar appears, rendering the text unreadable beyond a certain point. How can we rectify this behavior without resorting to overflow: hidden?

The solution lies in understanding how flexbox affects its children. By default, when a container has display: flex, its child elements are automatically positioned in a row or column, depending on the flex-direction property.

In our case, when display: flex is applied to the wrap container, the a and b divs are laid out horizontally, as expected. However, the min-width property of flexbox children defaults to auto, meaning that each div will take up the minimum width necessary to accommodate its content.

To resolve the issue, we need to explicitly set the min-width of the b div to 0:

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

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

By doing so, we ensure that the b div can expand to fit the container's available width, eliminating the horizontal scrollbar and allowing the text to break into multiple lines as intended.

The above is the detailed content of How Does Flexbox Affect `overflow-wrap: break-word` Behavior?. For more information, please follow other related articles on the PHP Chinese website!