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

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>