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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With