Flexbox-填充剩余空间[重复]

Question

我有一个基本的flexbox布局，如下所示。。

body,html {
  height:100%;
  width:100%;

}

#container {
  width:100%;
  background:grey;
  display:flex;
  flex-direction:column;
}

.top {
  background:red;
  flex:1;
  padding:20px;
}

.bottom {
  background:yellow;
  flex:1;
  padding:20px;
}

<div id="container">
	<div class="top">
  Top Content
	</div>
	<div class="bottom">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis, arcu vitae sollicitudin pellentesque, quam libero imperdiet urna, eu rhoncus lorem dolor sed neque. Donec ex risus, pretium ut maximus fringilla, euismod id mi. Phasellus ligula sem, iaculis ut urna eget, efficitur vulputate sem.
  </div>
</div>

我试图使顶部的div填充剩余的空间，底部的div是动态的，因此高度根据文本的不同而变化。我的结果是这样的。。

在这种情况下，flexbox是最好的选择吗？

Answer 1

容器未设置为100%高度。它不够高。将容器设置为高度：100%后，还必须为每个弹性项目设置弹性基准。底部可以是flex:1 1 auto，但顶部应该是flex:0 1 auto

body,html {
  height:100%;
  width:100%;
  margin: 0;
}

#container {
  width:100%;
  height: 100%;
  background:grey;
  display:flex;
  flex-direction:column;
}

.top {
  background:red;
  flex:1 1 auto;
  padding:20px;
}

.bottom {
  background:yellow;
  flex:0 1 auto;
  padding:20px;
}

<div id="container">
	<div class="top">
  Top Content
	</div>
	<div class="bottom">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis, arcu vitae sollicitudin pellentesque, quam libero imperdiet urna, eu rhoncus lorem dolor sed neque. Donec ex risus, pretium ut maximus fringilla, euismod id mi. Phasellus ligula sem, iaculis ut urna eget, efficitur vulputate sem.
  </div>
</div>

Answer 2

首先，需要使容器占据垂直空间<代码>高度：100% 将完成此操作。

其次，如果希望title div的大小与下面的div不同，那么它们不应该都是flex:1，实际上您可能希望标题为flex:0

Answer 3

在这种情况下，flexbox是最好的选择吗？

是的，在这种情况下使用Flexbox是个好主意。

据我所知，为了达到您想要的效果，您需要在#container上设置高度：100%，以便它占据所有可用空间。然后在上设置flex-grow:0。底部，使其不会增长。

所以你的CSS应该是：

#container {
  width:100%;
  height:100%;
  background:grey;
  display:flex;
  flex-direction:column;
}

.top {
  background:red;
  flex: 1 0 auto; // Grow, don't shrink
  padding:20px;
}

.bottom {
  background:yellow;
  flex: 0 0 auto; // don't grow, take up only needed space
  padding:20px;
}