Fill remaining div height with image

Question

I've been doing some googling and I can't find the answer for what I am looking, seemingly simple thing seems to be very complex.

All I want to do is have 2 divs, one should take up as much height as it really needs for rendering.

The second div should fill the remaining space with an image (the image should have height: 100%), eg try to fill the remaining height.

This is where I am currently: http://jsfiddle.net/4rcmnu0z/

I have seen numerous examples how to do this with flexbox and table-row, however they didn't work with image itself.

<section>
  <header>
    header: sized to content
      <br/>this height grows as we have more content here.
  </header>
  <div>
    main content: (this fills remaining height) this cat picture should have height 100%<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break -->
    x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
</section>

CSS:

html, body { height: 100%; }
section {
  display: flex;
  flex-flow: column;
  height: 100%;
}
header {
  background: tomato;
}
div {
  flex: 2 ;
  background: gold;
  overflow: auto;

  background-position: center center; 
  background-size:auto 100%; 
  background: url('http://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg') no-repeat;
}
footer {
  background: lightgreen;
  min-height: 60px; 
}

Answer 1

html, body { min-height: 100%; }
section {
 display: flex;
 flex-flow: column;
 height: 100%;
}
header {
 background: tomato;
 flex: 1;
}
div {
 min-height: 100%;
 background: gold;
 overflow: auto;
 background-position: center center; 
 background-size:auto 100%; 
 background:url('http://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg') no-repeat;
}

Change this with your Css Hope it works :)

Answer 2

You need to apply background-position and background-size after background url. and to stretch image to div make background-size: cover .

html, body { min-height: 100%; }
section {
 display: flex;
 flex-flow: column;
 height: 100%;
}
header {
 background: tomato;
 flex: 1;
}
div {
 min-height: 100%;
 background: gold;
 overflow: auto;
 background: url('http://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg') no-repeat;
 background-position: center center; 
 background-size:cover;
}

I hope this will work

Answer 3

Please define the background settings in order. That was the issue, your CSS itself works fine, I made one small change, I set margins for body and html tag to 0, this removed the scrollbar, you can either use this change or leave it.

Check my below DEMO.

CSS:

html, body { height: 100%;margin:0px; }
section {
  display: flex;
  flex-flow: column;
  height: 100%;
}
header {
  background: tomato;
}
div {
  flex: 2 ;
  background: gold;
  overflow: auto;
  background: url('http://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg') no-repeat;
  background-size: auto 100%;
  background-position: center center;
}
footer {
  background: lightgreen;
  min-height: 60px; 
}