CSS flex 盒 : How to fill the remaining screen height with a nested div?

Question

在这个例子中， http://jsfiddle.net/ch7n6/1833/

<section id="container" >
<header id="header" >This is a header</header>
<article id="content" >
    This is the content that
    <br />
    With a lot of lines.
    <br />
    With a lot of lines.
    <br />
    This is the content that
    <br />
    With a lot of lines.
    <br />
    <br />
    This is the content that
    <br />
    With a lot of lines.
    <br />
    <br />
    This is the content that
    <br />
    With a lot of lines.
    <br />
</article>
<footer id="footer" >This is a footer</footer>
</section>

“文章”可能会根据屏幕的不同而有很大不同，但是，在以下情况下，用一个额外的 div 包裹文章，它不再有效，有人可以建议处理这个问题的方法吗？我问这个问题的原因是我正在使用 Vuetify，所以 div 嵌套很深，我不能只按照工作示例来解决我的问题。

<section id="container" >
<header id="header" >This is a header</header>
<div>
<article id="content" >
    This is the content that
    <br />
    With a lot of lines.
    <br />
    With a lot of lines.
    <br />
    This is the content that
    <br />
    With a lot of lines.
    <br />
    <br />
    This is the content that
    <br />
    With a lot of lines.
    <br />
    <br />
    This is the content that
    <br />
    With a lot of lines.
    <br />
</article>
</div>
<footer id="footer" >This is a footer</footer>
</section>

Answer 1

.flexbox {
 flex: 1 1 auto;
 overflow-y: auto;
}

在您的 div 元素中尝试这种样式。

html, body {
    height: 100%;    
}

.flexbox {
  flex: 1 1 auto;
  overflow-y: auto;
}

#container {
    display: flex;
    flex-direction: column;
    height: 100%;
    
    width: 50%;
    background-color: red;
}

#container header {
    background-color: gray;
}
#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}
#container footer {
    background-color: gray;
}

<section id="container" >
    <header id="header" >This is a header</header>
    <div class="flexbox">
    
     <article id="content" >
        This is the content that
        <br />
        With a lot of lines.
        <br />
        With a lot of lines.
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
    </article>
    </div>
    <footer id="footer" >This is a footer</footer>
</section>