I'm trying to get two columns displaying at 50% width, that will automatically wrap if the width becomes smaller than the available width. This code works in Firefox and Chrome, but doesn't in IE11.
If I remove the flex-basis:50%, IE will properly wrap, but the widths are not 50% either on wide monitors.
Side Note: If I add a padding to the div elements, all the browsers wrap the content. What is the proper way of handling padding in flexbox?
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex > div{
flex-grow:1;
flex-basis:50%;
}
div:first-child{
background-color: #cfc;
}
div:last-child{
background-color: #ccf;
}<section class="flex">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div>
<textarea rows="5" cols="40"></textarea>
</div>
</section>
