How can I create a parent div that contains two child divs, each with a width of 50% that adjusts based on content?
The issue arises when one of the child divs has an h3 element with white-space:nowrap;, causing it to exceed the 50% width.
I attempted to use min-width:0; to restrict the width back to 50%, but this causes overflow for the h3 element.
Is there a way to maintain equal 50% widths for both child divs even when they contain elements with white-space:nowrap;?
To see the problem in action, check out this CodePen link: http://codepen.io/anon/pen/VjPwLm?editors=1100
#parent {
background: whitesmoke;
display: inline-flex;
}
#left {
background: rgba(10, 200, 250, 0.5);
flex-basis: 0;
flex-grow: 1;
}
#right {
background: rgba(250, 200, 10, 0.5);
flex-basis: 0;
flex-grow: 1;
/*min-width:0;*/
/* Turn this on to see the h3 overflow */
}
h3 {
white-space: nowrap;
}<div id="parent">
<div id="left">Captain Deadpool</div>
<div id="right">
<h3>Very long title that does not entirelly fit into the div</h3>
</div>
</div>