Text breaking out of flexbox container

Question

I've been working on learning flexbox for layout and have been unable to figure out why text is not wrapping inside the flex-item. The text is breaking out of the container like this:

html,
body {
  height: 100%;
}

.main {
  max-width: 10em;
  margin: 1em auto;
}

.flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12em;
  border: 1px solid red;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item {
  padding: 5px;
  border: 1px solid black;
}

<div class="main">
  <div class="flex-row">
    <div class="flex-column">
      <div class="flex-item">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      </div>
      <div class="flex-item">
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      </div>
    </div>
  </div>
</div>

Has nothing to do with flexbox... A simple google about breaking long words would lead you to the right track — Roko C. Buljan, Sep 27 '17 at 17:09

Michael Benjamin · Accepted Answer · 2017-09-27T17:22:17.293

There are no spaces between your text.

The default value of the word-break property is normal, meaning that a continuous line of text has no line breaks.

For these reasons, your text is not wrapping and overflowing the container.

Add word-break: break-all to .flex-item.

html,
body {
  height: 100%;
}

.main {
  max-width: 10em;
  margin: 1em auto;
}

.flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12em;
  border: 1px solid red;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item {
  padding: 5px;
  border: 1px solid black;
  word-break: break-all; /* new */
}

<div class="main">
  <div class="flex-row">
    <div class="flex-column">
      <div class="flex-item">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      </div>
      <div class="flex-item">
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      </div>
    </div>
  </div>
</div>

From MDN:

word-break

The word-break CSS property specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box.

In contrast to overflow-wrap, word-break will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).

Values

normal

Use the default line break rule.

break-all

To prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text).

keep-all

Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for normal.

There's actually another reason – flexbox-specific – why the flex items are overflowing the container. Here's the explanation:

Why doesn't flex item shrink past content size?

To contain the items (without the need for the text to wrap), you could apply min-width: 0, overflow: hidden or overflow: auto to .flex-column.

html,
body {
  height: 100%;
}

.main {
  max-width: 10em;
  margin: 1em auto;
}

.flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12em;
  border: 1px solid red;
}

.flex-column {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* new */
  /* overflow: auto; */
  /* min-width: 0; */
}

.flex-item {
  padding: 5px;
  border: 1px solid black;
}

<div class="main">
  <div class="flex-row">
    <div class="flex-column">
      <div class="flex-item">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      </div>
      <div class="flex-item">
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      </div>
    </div>
  </div>
</div>

Text breaking out of flexbox container

1 Answers1

`word-break`