CSS填充剩余容器宽度答案

【问题标题】：CSS fill remaining container widthCSS填充剩余容器宽度
【发布时间】：2018-05-26 17:17:10
【问题描述】：

我对 CSS 有一些特定的问题。我试图找到解决方案，但找不到这种示例：

.container {
  background: blue;
  height: 50px;
}

.nested {
  background: red;
  width: calc(100vh - 20px);
}

.primary {
  background: yellow;
  height: 50px;
  float: left;
}

.secondary {
  background: green;
  height: 100%;
  float: left;
}

<div class="container">
  <div class="primary">
    <div class="nested">
      ffffff
    </div>
  </div>
  <div class="secondary">
    wwwwwww
  </div>
</div>

我创建了一个带有问题的简单版本的 Fiddle： https://jsfiddle.net/7nwxfgg5/

我想扩展绿色 div 以填充所有可用的蓝色容器宽度，但我不知道该怎么做。

编辑

删除 float: left 有助于宽度，但现在我注意到它不适用于高度，请检查这个 sn-p：

.container {
  background: blue;
}

.nested {
  background: red;
  height: 200px;
  width: calc(100vh - 20px);
}

.primary {
  background: yellow;
  height: 50px;
  float: left;
}

.secondary {
  background: green;
  height: 100%;
}

<div class="container">
  <div class="primary">
    <div class="nested">
      ffffff
    </div>
  </div>
  <div class="secondary">
    wwwwwww
  </div>
</div>

如何将绿色 div 的大小调整为与红色相同的高度？

【问题讨论】：

为什么不直接从.secondary 定义中删除float: left？通过提供此属性，您可以强制容器的宽度由其内容定义。
我同意@raina77ow，从“容器”中删除“浮动”和“高度”。 jsfiddle.net/jadeallencook/7nwxfgg5/1
最终的布局应该是什么？蓝色的 DIV 会发生什么？
@raina77ow 谢谢，它成功了！，我不知道你描述的这个力属性。
@hungerstar 最终布局：红色 DIV 的高度/宽度“定义”其他所有内容的大小，黄色稍高，绿色填充其余空间

标签： css flexbox width containers fill

【解决方案1】：

Flex 非常适合布局。我发现浮动比它的价值更麻烦，所以我尽量避免它。它使构建响应式布局变得更加容易。这是了解更多信息的好资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
  background: blue;
  height: 50px;
  display:flex;
}

.nested {
  background: red;
  width: 100%;
}

.primary {
  background: yellow;
  flex:0 0 50%;
}

.secondary {
  background: green;
  flex:0 0 50%;
}

<div class="container">

  <div class="primary">
    <div class="nested">
      ffffff
    </div><!-- nested -->
  </div><!-- primary -->
  
  <div class="secondary">
    wwwwwww
  </div><!-- secondary -->
  
</div><!-- container -->

【讨论】：