两个带有白色空间的50%div:在flex容器内的nowrap元素

Question

我希望有一个父div,它包含两个50%宽度的子div,用于调整内容大小.

其中一个有一个h3,white-space:nowrap;这导致div增长超过50%.

我可以使用min-width:0;但h3现在溢出来强制div返回50%宽度.

所以我要么在子div上获得不同的宽度,要么在其中一个内部的h3上溢出.

是否可以使它们具有相同的50%宽度,即使white-space:nowrap;内部元素也是如此？

在这里查看问题:http://codepen.io/anon/pen/VjPwLm？edit = 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

如果我理解正确,您希望左侧弹性项目与长标题一样宽.

然后你可以:

• min-width: 100%在两个弹性项目上使用,使它们与文本的连接一样宽.然后,他们将同样宽广.

• 但它们太宽,因为包含了第一个弹性项目的文本.使用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>