html - 一行 2 个内联 div，当左边一个太大时，右边一个在另一个下面

Question

我有这样的情况: 我得到了一个设置宽度为 790px 的包装器 div。 我有两个宽度为 390px 的内联 div(左和右)。 这是因为遗留问题，否则我不会用固定像素设置它们。 所以问题是当左边的扩展并超过 390px 时，右边的在左边的下面。我想要如果左边的扩大并变大，左边的缩小。左边的永远不会占用 wrapper 中超过 70% 的空间。但是我不能将正确的宽度设置为 30%，因为我希望当它们都未满时具有相同的大小。有任何想法吗？那些div可以去掉390px的rull，但是我应该怎么调整呢？

Answer 1

float 第一个 div 并设置所需的最小和最大宽度。将隐藏的溢出添加到另一个 div:

body {
  font: medium sans-serif;
}
.wrapper {
  width: 790px;
  background: #CCC;
}
.wrapper:after {
  content: "";
  display: block;
  clear: both;
}
.wrapper > div:first-child {
  float: left;
  min-width: 50%;
  max-width: 70%;
  background: #FC0;
}
.wrapper > div:last-child {
  overflow: hidden;
  background: #0CF;
}

<p>Case 1</p>
<div class="wrapper">
  <div>Lorem ipsum dolor sit amet</div>
  <div>Lorem ipsum dolor sit amet</div>
</div>
<p>Case 2</p>
<div class="wrapper">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed turpis libero, luctus at tincidunt eget, mollis eget augue. Praesent eu.</div>
  <div>Lorem ipsum dolor sit amet</div>
</div>
<p>Case 3</p>
<div class="wrapper">
  <div>Lorem ipsum dolor sit amet</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed turpis libero, luctus at tincidunt eget, mollis eget augue. Praesent eu.</div>
</div>