我指的是解决方案：How do I float two divs side-by-side without specifying a width?
不过，我想要相反的星座：右边的 div 应该留在右侧，同时占用最小的空间（仅与其内容一样多），而左边的 div 应该扩展到剩余空间。
我尝试了以下方法：
.right {
float: right;
background: red;
}
.left {
overflow: hidden;
background: green;
}<div class="left">left div</div>
<div class="right">right div</div>然而，这会将右边的 div 放在换行符上，而左边的 div 会扩展到上面的整个宽度。
【问题讨论】：
这是因为：
浮点数是在当前行向左或向右移动的框。
取自http://www.w3.org/TR/CSS21/visuren.html#floats
因为右侧浮动的div 在新行上，它会出现在左侧div 的下方。通过将其放在左侧div 之前，它们将位于同一行。
在您的原始示例中，divs 将像这样堆叠：
当右 div 向右浮动时，它会移动到当前行的右侧：
颠倒顺序会导致divs 像这样堆叠：
当右 div 向右浮动时，它会移动到当前行的右侧：
但是：
由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。
所以左侧div 有效地向上移动到右侧div 的同一行：
因此，获得所需结果的最简单方法是通过将 .right 放在 .left 之前来更改 HTML 中 divs 的顺序：
.right {
float: right;
background: red;
}
.left {
overflow: hidden;
background: green;
}<div class="right">right div</div>
<div class="left">left div</div>【讨论】：
div 不再是流的一部分，所以左div 现在在右div 占据的行上。如果以后有机会，我会尝试在我的答案中添加更多信息。
你快到了，你只需要改变两个div的顺序
而不是
<div class="left">left div</div>
<div class="right">right div</div>
你把它们放在另一个顺序。这使得浮动 div 占据了它所需的空间，而下一个 div (.left) 将占据其余部分。
<div class="right">right div</div>
<div class="left">left div</div>
【讨论】：
一个可能的解决方案：
.right{
position: absolute;
top: 0;
right: 0;
}
【讨论】：
这就是你想要达到的目标？
https://jsfiddle.net/ksg8fnL9/
<div id="wrapper">
<div class="left">left div</div>
<div class="right">right div</div>
</div>
#wrapper {
display:table;
width:100%;
}
#wrapper > div {
display:table-cell;
}
#wrapper > div.right{
background:red;
}
#wrapper > div.left{
background:green;
width:70%
}
【讨论】：