当溢出设置为自动时，弹性项目不会在交叉轴上拉伸答案

【问题标题】：flex items don't stretch in cross axis when overflow is set to auto当溢出设置为自动时，弹性项目不会在交叉轴上拉伸
【发布时间】：2018-10-30 13:34:20
【问题描述】：

由于 position:fixed 有几个缺点，我试图通过使用 flexbox 创建一个固定的页脚。我有一个带有方向行的 flex 容器，并对其应用了 overflow-y:auto。现在，当弹性项目的内容超过可见区域的高度并且出现滚动条时，弹性项目不会将它们的高度拉伸到容器的高度，而是坚持可见区域的高度。结果是文本没有完全覆盖背景颜色。 HTML：

<body>
<div id="middle">
    <nav>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua.
    </nav>
    <main>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod  et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
            dolor sit amet.

            Content shortened; more content to make the scrollbar appear

        </main>
</div>
<!-- Main Bereich Ende -->

<!--Footer Anfang -->
<footer>
    <div id="footerleft">
        <h2>Letzte Änderung
            <br>20.05.2018</h2>
    </div>
    <div id="footermiddle">
        <h3>Copyright © 2018 xxx - Alle Rechte vorbehalten</h3>
    </div>
    <div id="footerright">
        <a href="#jump-body">
            <img src="images/buttonup.png" title="Zum Seitenanfang" alt="Zum Seitenanfang"></img>
        </a>
    </div>
</footer>
<!--Footer Ende -->
</body>

CSS：

    body {
        margin: 0;
        padding: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    #middle {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        overflow-y: auto;
    }

    nav {
        flex: 1;
        background-color: blue;
    }

    main {
        flex: 4;
        background-color: maroon;
    }


    footer {
        width: 100%;
        flex: 0 0 auto;
        display: flex;
    }

    #footerleft {
        flex: 2;
    }

    #footermiddle {
        flex: 6;
    }

    #footerright {
        flex: 2;
    }

    #footerright img {
        width: 30px;
        height: 30px;
        display: block;
        margin: 0px auto auto;
    }

如何解决这个问题？

【问题讨论】：

可以使它成为一个有效的 sn-p 以便我们可以更好地看到问题
这里是：webentwicklung.ulrichbangert.de/… 使滚动条出现并向下滚动。
顺便说一句：“2 天内有资格获得赏金的问题”是什么意思？（英语不是我的母语。）

标签： css flexbox overflow

【解决方案1】：

只需从body 选择器中删除height: 100vh;。默认情况下，高度是自动的，因此主体高度将根据其内容进行拉伸。所以不要使用min-height: 100vh;。

注意：img 标签不应有结束标签 </img>

body {
        margin: 0;
        padding: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    #middle {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        overflow-y: auto;
    }

    nav {
        flex: 1;
        background-color: blue;
    }

    main {
        flex: 4;
        background-color: maroon;
    }


    footer {
        width: 100%;
        flex: 1 0 auto;
        display: flex;
    }

    #footerleft {
        flex: 2;
    }

    #footermiddle {
        flex: 6;
    }

    #footerright {
        flex: 2;
    }

    #footerright img {
        width: 30px;
        height: 30px;
        display: block;
        margin: 0px auto auto;
    }

<div id="middle">
    <nav>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua.
    </nav>
    <main>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod  et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
            dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod  et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
            dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod  et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
            dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod  et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
            dolor sit amet.

            Content shortened; more content to make the scrollbar appear

        </main>
</div>
<footer>
    <div id="footerleft">
        <h2>Letzte Änderung
            <br>20.05.2018</h2>
    </div>
    <div id="footermiddle">
        <h3>Copyright © 2018 xxx - Alle Rechte vorbehalten</h3>
    </div>
    <div id="footerright">
        <a href="#jump-body">
            <img src="images/buttonup.png" title="Zum Seitenanfang" alt="Zum Seitenanfang">
        </a>
    </div>
</footer>

【讨论】：

不，我打算有一个像 position:fixed 这样的固定页脚。但是，由于 position:fixed 有几个缺点，我正在尝试使用 flexbox 编写解决方案。

【解决方案2】：

与此同时，我进一步研究并发现了这一点： https://github.com/philipwalton/flexbugs/issues/141 给出了解决此问题的方法。有哪位flexbox专家能解释一下吗？这真的是 flexbox 中的一个错误吗？它是跨浏览器的吗？修复演示： http://webentwicklung.ulrichbangert.de/thread-footer-verdeckt-fixed-footer-3.html

【讨论】：

PS：当有滚动条时，此解决方法可以正常工作。然而，当视口很宽时，flex 项目 nav 和 main 不会扩展到 div#middle 的高度。任何如何解决这个问题的建议也很感激。