Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flex: When text too long break into new line

Tags:

css

flexbox

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

like image 594
Very Curious Avatar asked Jun 20 '16 19:06

Very Curious


1 Answers

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

like image 111
Hunter Turner Avatar answered Oct 30 '22 13:10

Hunter Turner