Very Curious Very Curious - 5 months ago 21
CSS Question

Flex: When text too long break into new line

I was thinking if it is possible to achieve following using css flexbox.

In the layout, there are originaly 2 div next to each other. Left one contains group of icons and has a fixed width. Right one contains text, which can be potentially quite long.

Is there a way, how to make using only css (especially flexbox), that when the text is too long, the div will break onto the new line (under first div)?

Check the following image.
enter image description here

Answer

You can do this by creating a container with display: flex;, and flex-wrap: wrap;. Then give the overflow text a flex-grow: 1;

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.fixed-width {
  width: 200px;
  border: 1px solid red;
}

.fixed-width,
.overflow-text {
  display: flex;
  justify-content: space-around;
}

.overflow-text {
  flex-grow: 1;
  border: 1px solid red;
}
<div class="container">
  <div class="fixed-width">
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
  </div>
  <div class="overflow-text"><p>This is some text that is really long.</p></div>
</div>

JSFiddle

Comments