html - 一行2个内嵌div，当左侧的div太大时，右侧的div进入另一个

我有这种情况：
我有一个设置宽度为790px的包装div。
我得到两个宽度为390px的内联div（左和右）。
这是因为存在遗留问题，否则我不会将其设置为固定像素。
所以问题是，当左一个展开并超过390px时，右一个进入左下方。我想如果左边的一个扩大并变大，左边的一个缩小。左侧的包装永远不会占用包装纸中70％以上的空间。但是我不能将合适的宽度设置为30％，因为我希望当它们都不满时，它们具有相等的尺寸。有任何想法吗？可以为这些div删除390px的rull，但是我应该如何调整呢？

最佳答案

浮动第一个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>