Tag with HTML5 tags to get the maximum height available

Question

I have an HTML page with a header / content / footer that uses the flexbox model and contains a tag <details>. I need the information to contain the maximum available height, which means that when in the open state its content should occupy all the space in its container (except for the summary, of course).

Here is my HTML / CSS code ( http://jsfiddle.net/rtojycvk/2/ ):

HTML:

<div class="wrapper">
    <div class="header">Header</div>
    <div class="main">
        Some text before details
        <details class="details" open>
            <summary>Details summary</summary>
            <div class="content">Details content</div>
        </details>
    </div>
    <div class="footer">Footer</div>
</div>

CSS:

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

.wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
}

.header {
    height: 50px;
    background-color: yellow;
    flex: 0 0 auto;
}
.main {
    background-color: cyan;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.footer {
    height: 50px;
    background-color: green;
    flex: 0 0 auto;
}
.content {
    background-color: blue;
    color: white;
    flex: 1;
}
.details {
    background-color: red;
    flex: 1;
    display: flex;
    flex-direction: column;
}

As you can see, the part tag itself accepts all available space, but not its contents.

PS I need this to work only in Chrome.

Answer 1

http://jsfiddle.net/rtojycvk/16/

, calc() css ( )

.content {
    background-color: lightgray;
    color: black;
    flex: 1;
    display:flex;
    position:absolute;
    height:  calc(100% - 18px);
    width: 100%;
}
.details {
    background-color: gray;
    flex: 1;
    display: flex;
    flex-direction: column;
    position:relative;
}

, ! ( , : p)

Answer 2

.content . fiddle

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

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
}

.header {
  height: 50px;
  background-color: yellow;
  flex: 0 0 auto;
}
.main {
  background-color: cyan;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.footer {
  height: 50px;
  background-color: green;
  flex: 0 0 auto;
}
.content {
  background-color: blue;
  color: white;
  flex: 1;
  position: absolute;
  top: 3%;
  bottom: 0;
  height: 97%;
  width: 100%;
}
details {
  position: relative;
}
summary{
  height: 3%;
}
.details {
  background-color: red;
  flex: 1;
  display: flex;
  flex-direction: column;
}

Answer 3

, , : vh .content:

html,
body {
  margin: 0;
  padding: 0;
  height:100vh;
  background: orange;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height:100vh;
  background: pink;
}

.header,
.footer {
  height: 10vh;
  min-height: 25px;  /* (or max-height, or both!)  */
  max-height: 50px;
  background-color: yellow;
  flex: 0 0 auto;
}

.footer {
  background-color: green;
}

.main {
  background-color: cyan;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 20vh);   /*  10vh * 2 (.header + .footer sizes) */
}

.content {
  background-color: blue;
  color: white;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 20vh);  /*  10vh * 2 (.header + .footer sizes) */
}

.details {
  background-color: red;
  flex: 1;
  display: flex;
  flex-direction: column;
}

<div class="wrapper">
    <header class="header">Header</header>
    <main class="main">
        Some text before details
        <details class="details" open>
            <summary>Details summary</summary>
            <div class="content">Details content</div>
        </details>
    </main>
    <footer class="footer">Footer</footer>
</div>

Hide result

: http://jsfiddle.net/ALXWebDev/wxm0v49c/

, !