1

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?

jbwtucker
  • 31
  • 4
  • You say you have one div that fits the viewport and inside that is an image. But then you want "the inner div". What inner div? Do you mean a div below the image and inside the outer div? – Rob Aug 16 '16 at 01:33
  • 1
    Welcome to SO @jbwtucker, can you provide your HTML? Perhaps use jsfiddle for a working example? – ewitkows Aug 16 '16 at 02:01
  • Solved my own problem. Thanks, @ewitkows… I've always been able to solve my own problems, often by lurking here at SO. I guess I broke down and asked just a little too soon. Used the-echoplex.net to solve it. – jbwtucker Aug 16 '16 at 02:09

1 Answers1

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.

jbwtucker
  • 31
  • 4