html - 两个带有空白 :nowrap elements inside a flex container 的 50% div

Question

我想要一个包含两个 50% 宽度子 div 的父 div，子 div 随内容调整大小。

其中一个有一个带有 white-space:nowrap; 的 h3，这会导致 div 增长超过 50%。

我可以使用 min-width:0; 强制 div 返回到 50% 宽度，但是 h3 现在溢出了。

所以我要么在子 div 上获得不同的宽度，要么在其中一个 div 中从 h3 溢出。

是否有可能使它们具有相同的 50% 宽度，即使是内部有 white-space:nowrap; 的元素？

在这里查看问题: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

如果我没理解错的话，您希望左侧的 flex 元素与长标题一样宽。

然后，您可以:

• 在两个 flex 元素上使用 min-width: 100% 使它们与文本的串联一样宽。然后，它们将同样宽。

• 但是它们太宽了，因为包含了第一个 flex 元素的文本。使用 width: 0 忽略它。

#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>