How do I make a div stretch in a flexbox of dynamic height?

问题

I'm trying to make a stacked layout using flexbox. Ideally it'd look like this:

where the bottom (blue) div is a fixed height of 250px and the top div is n-250, where n is the size of the parent container--in another words, the top should stretch to fill the container.

I have some idea of how to do this when I have the container height, but I'd rather avoid having to determine that variable at runtime.

This issue has been covered at length in various forms , but none seem to address this simple use-case (here, for example, works with a header/content/footer, but ostensibly not with just content/footer).

I've set up a codepen with the example.

回答1:

I think this is answering your question using the flex-grow: 1;. hope it helps

https://jsfiddle.net/BradChelly/ck72re3a/

.container {
  width: 100px;
  height: 150px;
  background: #444;
  display: flex;
  flex-direction: column;
  align-content: stretch;
}
.box1 {
  width: 100%;
  background: steelblue;
  flex-grow: 1;
}
.box2 {
  height: 50px;
  width: 100%;
  background: indianred;
}

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

回答2:

Minimum line of code. Brad's answer is correct. But here I used flex instead of flex-grow and removed align-items

.container {
  width: 100px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.top {
  width: 100%;
  background: blue;
  flex: 1;
}
.bottom {
  height: 70px;
  width: 100%;
  background: green;
}

<div class="container">
  <div class="top"></div>
  <div class="bottom"></div>
</div>

Demo here

回答3:

That can be done without flexbox by simply using CSS Calc

html, body {
  margin: 0;
}
.container {
  height: 100vh;
}
.top {
  background: lightblue;
  height: calc(100% - 100px);
}
.bottom {
  height: 100px;
  background: lightgreen;
}

<div class="container">
  <div class="top"></div>
  <div class="bottom"></div>
</div>

If you want it to work on older browsers, update these rules like this

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

来源：https://stackoverflow.com/questions/41477506/how-do-i-make-a-div-stretch-in-a-flexbox-of-dynamic-height

标签

css

flexbox