Two 50% divs with white-space:nowrap elements inside a flex container

Question

I want to have a parent div that holds two 50% width children divs that resize with content.

One of them has an h3 with white-space:nowrap; and this causes the div to grow past 50%.

I can force the div to return to 50% width using min-width:0; but the h3 now overflows.

So I either get a different width on the child divs or an overflow from the h3 inside one of them.

Is it possible to make them have the same 50% width even with elements that have white-space:nowrap; inside?

Check out the problem here: 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>

Answer 1

If I understand correctly, you want the left flex item to be as wide as the long title.

Then, you can:

• Use min-width: 100% on both flex items to make them as wide as the concatenation of their texts. Then, they will be equally wide.

• But they are too wide, because the text of the first flex item is included. Use width: 0 to ignore it.

#parent {
  background: whitesmoke;
  display: inline-flex;
}
#left, #right {
  min-width: 100%;
}
#left {
  background: rgba(10,200,250,0.5);
  width: 0;
}
#right {
  background: rgba(250,200,10,0.5);
  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>