固定宽度的右栏和可调整大小的内容

Question

我试图让两个 div 彼此相邻。右边的宽度固定，但左边的宽度必须能够调整。我尝试了多种方法，但 none 满足我的所有要求：

右边的宽度固定
Parent div 的高度最大 child（包裹其 childs）
左边一个要调整大小
Html 结构必须按此顺序（原因在底部）：

html:

<div class="container">
    <div class="variable_width"></div>
    <div class="fixed_width"></div>
</div>

我尝试了 绝对定位 右侧 div 并在左侧添加了边距，它达到了所有要求，除了 parent div 没有换行最大的 child （如预期的那样） http://jsfiddle.net/0fxL71xL/3/

.container{max-width:400px;position:relative;}
.variable_width{margin-right:100px;}
.fixed_width{width:100px; position:absolute;right:0;top:0;}

我也试过使用 inline-block 和 max-width 但是 div 没有在顶部对齐，我不'知道如何处理空白问题。最重要的是，它 不会使左 div resize: http://jsfiddle.net/0fxL71xL/4/

.container{max-width:400px;}

.variable_width{max-width:290px; display:inline-block;}
.fixed_width{width:100px; display:inline-block;}

我也尝试了 float right on the right div，但它没有接近我想要的。我得到的最接近的是更改 html 中的顺序并在 div 上使用 float:right 必须正确，但在这种情况下我不能使用 @media 查询来获得它某时刻左下div显示

编辑：虽然 paulie_d 的答案修复了它，但我更喜欢具有大型浏览器支持的东西

Answer 1

flexbox 可以做到。

JSfiddle Demo

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.fixed_width {
  width: 200px;
  background: #bada55;
}
.variable_width {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: plum;
  height: 100px;
}

<div class="container">
  <div class="variable_width"></div>
  <div class="fixed_width"></div>
</div>

Answer 2

.container {
width:100%;
}

.variable_width {
    max-width: 70%;
    display: inline-block;
    background-color:blue;
margin-right: -3px;
}
.fixed_width {
width:100px;
width: 28%;
display: inline-block;
    background-color:red;
vertical-align: top;
}

现在您可以使用此代码了。我认为它会工作 fine.you 可以添加一些可变宽度的内容 div class 并检查它是否工作或 not.i 已经检查它并且它确实工作 :) 。 http://jsfiddle.net/souraj/vaqbsdzk/

Answer 3

经过更多搜索，我发现了这个有趣的页面，其中总结了一些技术来实现我想要的。给出了最完整的答案。

http://clubmate.fi/100-percent-height-columns-fixed-width-sidebar-pure-css-solutions-to-commons-fluid-layout-problems/

固定宽度的右栏和可调整大小的内容

Fixed width right bar and resizable content

html

css

resize