Wrapping text in a flex box to next column

June 16, 2024

I have some text separated into paragraphs in a flex container. There should be two columns, one on the left and another on the right which split the container in half, like a book.

Here’s my current code:

#texts{
    display:flex;
    max-height:300px;
    min-height:300px;
    width:300px;
    background-color:yellow;
    flex-flow:column wrap;
    font-size:15px;
}

#texts>div{
    text-indent:1em;
    width:50%;
    overflow: hidden;
}

<div id="texts">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit... blah blah paragraph 1</div>
    <div>This is paragraph 2.. very interesting. I am filler text.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>More filler text here. Paragraph 4. Hopefully I've wrapped accordingly. Who knows?</div>
    <div>Another paragraph here</div>
</div>

Right now it wraps the entire paragraph when it doesn’t have space in the first column. I’m wondering if it’s possible for the text to be broken to fill the rest of the first column before wrapping into the second. I’m not sure where to go from here.

>Solution :

It looks like you might be better off using CSS columns:

#texts {
  column-count: 2;
  column-fill: auto;
  gap: 1em;
  width: 300px;
  height: 300px;
  background-color:yellow;
  font-size: 15px;
}

#texts > div {text-indent:1em;}

<div id="texts">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit... blah blah paragraph 1</div>
    <div>This is paragraph 2.. very interesting. I am filler text.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>More filler text here. Paragraph 4. Hopefully I've wrapped accordingly. Who knows?</div>
    <div>Another paragraph here</div>
</div>