Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text breaking out of flexbox container

Tags:

css

flexbox

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:

Image of broken layout

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>
like image 475
Mdd Avatar asked Sep 27 '17 17:09

Mdd


People also ask

How do I keep text in flexbox?

As you only want the text itself to wrap you need to use flex-wrap: nowrap; to keep . right on the same line. The text will automatically wrap when there is not enough space.

How do you make flexbox text not overflow?

This, as I understand (and please enlighten me if you understand further) amounts essentially to the minimum width of the children text nodes. In order to overcome this large minimum width we simply add in a min-width: 0 to the flex div (Note: this permits us to remove width: 100%; ).

Does flexbox work with text?

Flex[box] is for boxes and not for texts so never make your text container a flexbox container.

How do I stop my flexbox from stretching?

By default, the child elements of a flexbox container will stretch vertically to fill the height of the container. This can be prevented by using the align-self property on the child element that you do not want to stretch.


1 Answers

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>
like image 58
Michael Benjamin Avatar answered Sep 19 '22 13:09

Michael Benjamin