Flex-Wrap: Equal (Max-)Width for elements wrapped by column

Question

I've got this Layout https://jsfiddle.net/0f791rwd/1/ with either 2-3 columns (depending on variable data in the real thing). The text inside the elements should break to new lines, instead of overflowing. But as i don't know if there will be 2 or 3 columns i can't set a max-width to each manually. Is there a way to equally distribute the width of the parent to the wrapped elements?

The real thing is a VueJS Component, just if there's a benefit out of it, which could be useful here.

My Code:

 <div id="main">
    <div style="background-color:coral;">Very very long Text</div>
    <div style="background-color:lightblue;">Long Text</div>
    <div style="background-color:khaki;">C</div>
    <div style="background-color:pink;">D</div>
    <div style="background-color:lightgrey;">Also a very, very long Text</div>
    <div style="background-color:lightgreen;">F</div>
</div>

<style>
#main {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  div {
     height: 50px;
  }
}
</style>

Thanks!

Answer 1

You can follow the below code for equal width of column and text wrapping inside the column.

 #main { width: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: row; flex-wrap: wrap; } #main div { height: 50px; width:50%; }

 <div id="main"> <div style="background-color:coral;">Very very long Text</div> <div style="background-color:lightblue;">Long Text</div> <div style="background-color:khaki;">C</div> <div style="background-color:pink;">D</div> <div style="background-color:lightgrey;">Also a very, very long Text</div> <div style="background-color:lightgreen;">F</div> </div>