How make a single DIV fill the remaining VERTICAL

Question

I've got a div that fills the viewport (width is 100%, height is 100vh).

Inside the div is a banner image (width is 100%, height is not set so it resizes to automatically fit width), and another div.

I want the inner div to fill the rest of the vertical space. Width is easy; I just set width to 100%. But I want the div to also stretch to fill 100% of the remaining vertical space.

From what I've read, it seems like a flexbox could do that… but I haven't been able to get it to work.

Help?

Answer 1

The stripped-down HTML would look something like this:

<div id="flex-container">
  <img src="banner.png" />
  <div id="flex-item">Text or whatever</div>
</div>

Here's CSS that made this work:

.flex-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: center;
  align-items: flex-start;
}
.flex-item {
  position: relative;
  width: 100%;
  order: 0;
  flex: 1 1 auto;
  align-self: stretch;
}

FYI, it worked great in a test environment, but when I applied it to my working design it still didn't stretch vertically. Turns out the thing that was tripping me up was my .flex-item div was position: absolute. Changing it to position: relative didn't adversely affect the design in any way, so problem solved.