Question

我希望有一个父div，它包含两个50％宽度的子div，可以根据内容调整大小。

其中一个人h3 white-space:nowrap;，这导致div增长超过50％。

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

所以我在子div上获得了不同的宽度，或者在其中一个内部获得了h3的溢出。

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

在此处查看问题：http://codepen.io/anon/pen/VjPwLm?editors=1100

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

如果我正确理解了这个问题，你想要维护2个div，使它们有50％的宽度。将父div设置为100％宽度，然后将#right和#left设置为min-width：50％; 添加到h3以隐藏溢出。

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

两个带有空格的50％div：flexrap容器内的nowrap元素

2 个答案: