How can I make the children of a container that uses flexbox stay on the same line and each occupy the same size?

Question

I am using flexbox and I get the following problem.

Although the text is the same, each div is in line differently. I would like them to stay on the same line each element occupying the same size. I can have n amount of divs so I shouldn't use percentages.

How can I do it?

<ul class="flex-container wrap">
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita 
   excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni 
   quis cumque earum at laborum, consectetur voluptas.</li>
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita 
   excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, 
   magni quis cumque earum at laborum, consectetur voluptas.</li>
</ul>

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.wrap    { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}  

.flex-item {
  background: tomato;
  height: 100px;
  margin: 10px;
}

https://jsfiddle.net/4n86tqg3/1/

Answer 1

Remove height and reset flex property via flex:1; or flex:1 1 auto;, It will wrap when all width of children have reach their min-content width .

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
  display: flex;
}

.wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-item {
  background: tomato;
  min-height: 100px;
  flex: 1;
  margin: 10px;
}

ul+ul .flex-item {
  flex: 1 1 0
}

<ul class="flex-container wrap">
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>

</ul>

<ul class="flex-container wrap">
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>

</ul>
<p>if we are so many or width so small, some of us will wrap</p>

<ul class="flex-container wrap">
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
  <li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>

</ul>

Answer 2

If you want items to stay aligned, just remove the following rule set from your CSS:

.wrap { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

More about flex-wrap: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap