Why doesn\'t `overflow-wrap: break-word` work as expected when used within a flexbox container?-CSS Tutorial-php.cn

Why doesn\'t `overflow-wrap: break-word` work as expected when used within a flexbox container?

Mary-Kate Olsen

Release： 2024-11-02 10:04:30

Original

994 people have browsed it

Why doesn't `overflow-wrap: break-word` work as expected when used within a flexbox container?

Flexbox Affects Overflow-Wrap Behavior

Question:

In the following code, why does the overflow-wrap property not behave as expected when combined with display: flex?

.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>

Copy after login

Answer:

When you add display: flex to the wrap element, it becomes a flexbox container. By default, the elements inside a flexbox container are aligned in a single line. However, the min-width property of flexbox child elements is set to auto by default, causing them to occupy the minimum width necessary to hold their content.

In the provided code, this means that elements a and b are stretched to accommodate their content. Since element b has a very long text content, it forces a horizontal scrollbar to appear.

To resolve this issue, you can set the min-width of element b to 0. This will allow it to shrink to fit its content and eliminate the horizontal scrollbar.

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

.b {
  min-width: 0;
}

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

Copy after login

The above is the detailed content of Why doesn't `overflow-wrap: break-word` work as expected when used within a flexbox container?. For more information, please follow other related articles on the PHP Chinese website!