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>