How Does Flexbox Affect `overflow-wrap` Behavior and How Can We Fix It?

Flexbox's Impact on Overflow-Wrap Behavior

In CSS, the overflow-wrap property enables text to break into multiple lines when it encounters a line break character. This allows for more flexible text layout and prevents long lines from overflowing the container. However, when combined with the display: flex property, overflow-wrap can exhibit unexpected behavior.

Issue:

Consider the following snippet, where overflow-wrap: break-word is applied to a container with two child elements:

<div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal 
    ... (very long text)
  </div>
</div>

When overflow-wrap is enabled, the text in the second child element should break into multiple lines as expected. However, when display: flex is added to the container, a horizontal scrollbar appears despite the overflow-wrap setting.

Solution:

To eliminate the horizontal scrollbar, the default min-width property of flexbox child elements must be overridden. By setting min-width to 0, the child elements' width will shrink to accommodate their content, preventing them from overflowing the container.

.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0;
}

With this adjustment, the long text in the second child element will wrap to multiple lines without causing a horizontal scrollbar. This demonstrates that while display: flex can affect the behavior of other CSS properties, it can still be used in combination with overflow-wrap to achieve desired text layouts.

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