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.

回答1:

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

来源：https://stackoverflow.com/questions/37930217/flex-when-text-too-long-break-into-new-line