equal width flex items

Question

How mine looks so far:

How I want it to look:

Using flexbox I'm trying to make each tick line up with each other so each paragraph would take up the same amount of space and wrap onto new line in the second example if any one could help :)

 * { box-sizing: border-box; } .container { display: flex; flex-direction: column; text-align: center; } .first,.second { display: flex; flex-wrap: wrap; } p { padding: 1em .5em; flex: 1; } p::before { content: '✔'; } 

 <div class="container"> <div class="first"> <p> Lorem ipsum dolor sit amet imsppmfmmfmfmfmfmfmfm</p> <p> Lorem ipsum dolor sit ametlorem lorem lorem lorem lorem lorem, </p> <p> Lorem ipsum dolor sit amet,</p> <p> Lorem ipsum dolor sit amet, lorem ipsum</p> <p> Lorem ipsum dolor sit amet,</p> </div> <div class="second"> <p> Lorem ipsum dolor sit amet,</p> <p> Lorem ipsum dolor sit amet,</p> <p> Lorem ipsum dolor sit amet, jkdasnjdcmx,cnc,mncn,mn,mcmn</p> <p> Lorem ipsum dolor sit amet, </p> <p> Lorem ipsum dolor sit amet,dddddd </p> </div> </div> 

https://codepen.io/o-sewell/pen/rmqeME?editors=1010

Answer 1

The problem you're having is mostly the third item on the second row.

An initial setting on flex items is min-width: auto , which means the item will have a minimum width based on its content. This could be a fixed-width element or, in your case, the longest word.

Since your content in that item has one long string of text with no space characters, it's forcing the item to expand, throwing off the column alignments.

Simply use a space character to break that string of text and the issue is resolved.

I would also set the item widths to 20% and override the min-width: auto default for more stability.

More details here: Why doesn't flex item shrink past content size?

 * { box-sizing: border-box; } .container { display: flex; flex-direction: column; text-align: center; } .first,.second { display: flex; /* flex-wrap: wrap; <-- removed for demo */ } p { padding: 1em .5em; flex: 0 0 20%; /* adjustment */ overflow: hidden; /* adjustment */ border: 1px dashed green; } p::before { content: '✔'; } 

 <div class="container"> <div class="first"> <p> Lorem ipsum dolor sit amet imsppmfmmfmfmfmfmfmfm</p> <p> Lorem ipsum dolor sit ametlorem lorem lorem lorem lorem lorem, </p> <p> Lorem ipsum dolor sit amet,</p> <p> Lorem ipsum dolor sit amet, lorem ipsum</p> <p> Lorem ipsum dolor sit amet,</p> </div> <div class="second"> <p> Lorem ipsum dolor sit amet,</p> <p> Lorem ipsum dolor sit amet,</p> <p> Lorem ipsum dolor sit amet, jkdasnjdcmx,cnc,mncn,mn,mcmn</p> <p> Lorem ipsum dolor sit amet, </p> <p> Lorem ipsum dolor sit amet,dddddd </p> </div> </div> 

revised codepen