Scroll content in child div when parent div height reached

Question

Is it possible, with CSS only, to have the "content" div scrolling when the "menu" + the "content"'s content reaches the "wrapper" height?

The "menu" is dynamic and can have 1, 2 or 3 links, which will affect the left over space for the "content" div and it's height, before scrolling should appear.

I know I can set max-height to the "content" div but as I don't know the "menu"'s height I can't figure out how to solve that.

And if I do know the "menu" height, which will be a non-percentage value, I still have the issue calculating it's height out from the "content" height as it is in percentage.

Demo: http://jsfiddle.net/92rhj/2/

HTML:

<div class='wrap'>
    <div class='menu'>
        <a href=''>Contact us</a><br />
        <a href=''>Contact information</a>
    </div>
    <div class='content'>
        <b>Contact us</b><br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
    </div>
</div>

CSS:

.wrap {
    width: 80%;
    height: 80%;
    position: absolute;
    background-color: #ccc;
}
.content {
    overflow: auto;
    height: auto;
    max-height: 100%;  /* ?? */
}

Answer 1

I eventually came up with a way when answering another question, that partially needed something similar and where a flex version needed a fallback for IE8 (but it took me a couple of months before I figured it out :) ).

This sample has a "sticky footer as well", and all without fixed heights.

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

.container {
  display: table;
  width: 100%;
  height: 100%;
}
.page-row {
  display: table-row;
  height: 0;
}
.page-row-expanded {
  height: 100%;
}

main .content {
  height: 100%;
  overflow: auto;
}

.header, .footer {
  background-color: #bbb;
  padding: 10px;
}

<div class="container">
        
        <header class="page-row">
          <div class="header">
            <a href=''>Contact us</a><br />
            <a href=''>Contact information</a><br />
          </div>
        </header>
                
        <main class="page-row page-row-expanded">
            <div class="content">
              <b>Contact us</b><br />
              1. Bla bla bla<br />
              2. Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
            </div>
        </main>

        <footer class="page-row">
          <div class="footer">
            <a href=''>Copyright etc.</a><br />
            <a href=''>Sitemap etc.</a><br />
            <a href=''>Social etc.</a><br />
          </div>
        </footer>

    </div>

Answer 2

I fear the only way is to state/guess the menu's height explicitly (or a maximal height) and make it float over the page using position:fixed and top:0px

Example: http://jsfiddle.net/92rhj/6/

<div class='wrap'>
    <div class='menu'>
        <a href=''>Contact us</a><br />
        <a href=''>Contact information</a>
    </div>
    <div class='content'>
        <b>Contact us</b><br />
        1. Bla bla bla<br />
        2. Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
    </div>
</div>

-

.menu, .content {
    width: 100%;
}
.menu {
    position: fixed;
    top: 0;
    background-color: green;
}
.content {
    background-color: red;
    margin-top: 50px;
}