I am trying to make a columns layout work using flexbox. I encountered a problem when I tried to make each column of text wrap on to the next line when it does not have any more space. My problem could be seen in the image below.
I tried to set flex: 1 250px as from what I understand, it should set flex-basis to 250px, which means if the space is not large enough for the item of 250px, that item should wrap on to the next line, but the result I received was weird: only one item was able to wrap.
What I am trying to achieve is similar to the image below, where each item should wrap when there is not enough space.
I have tried to find answers to this, but most of them have the problems of setting a fixed width, which I do not have, and I can't figure out where the problem is...
My codes:
.list { display: flex; flex-wrap: wrap;}.list-item { flex: 1;}* { box-sizing: border-box; margin: 0; padding: 0; outline: red solid 1px;}<div class="list"><div class="list-item"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.</p></div><div class="list-item"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.</p></div><div class="list-item"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.</p></div><div class="list-item"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.</p></div></div>Thanks