javascript - bootstrap 4 中 flex-grow div 内的垂直溢出

Question

我在 html 网络布局方面有点菜鸟(我否认这一点，因为我觉得我可能犯了一些新手错误)但这让我发疯，我一直无法找到适合我的具体情况的解决方案

我正在尝试为 future 的桌面应用程序制作此布局

这是我的代码

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<style>
    html, body { height: 100%; }
    .vh-100 {
        min-height: 100vh;
    }

    .height-100 {
        height: 100%;
    }
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="d-flex flex-column h-100">
    <div class="content">
        first menu
    </div>
    <div class="content">
        second menu
    </div>
    <div class="content bg-danger flex-grow-1">
        <div class="d-flex flex-row w-100 h-100">
            <div class="d-flex flex-column h-100 w-25">
                <div class="content bg-success">
                    first submenu
                </div>
                <div class="content overflow-auto">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sapien leo, ornare ac dictum vel, feugiat in felis. Proin et nibh us orci luctus et ultrices posuere cubilia Curae; Integer dolor tellus, sagittis sed felis sed, blandit pharetra nisi. Suspendisse suscipit consectetur nisi, vel interdum enim lacinia vel. Nulla placerat malesuada libero, vitae egestas metus interdum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer consectetur porta augue ac suscipit.
                </div>
            </div>
            <div class="content bg-light w-75">
                more content
            </div>
        </div>

    </div>
    <div class="content bg-secondary">
        Footer
    </div>
</div>

为什么代码忽略了内容中的 overflow-auto？我该如何解决？非常感谢

Answer 1

你需要在 body 上设置 max-height 和 overflow:hidden:

body {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

然后在内容上overflow:auto让它根据需要滚动...

<div class="d-flex flex-column h-100">
    <div class="content"> first menu </div>
    <div class="content"> second menu </div>
    <div class="content bg-danger flex-grow-1 overflow-auto">
        <div class="d-flex flex-row w-100 h-100">
            <div class="d-flex flex-column h-100 w-25">
                <div class="content bg-success"> first submenu </div>
                <div class="content overflow-auto"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sapien leo, ornare ac dictum vel, feugiat in felis. Proin et nibh us orci luctus et ultrices posuere cubilia Curae; Integer dolor tellus, sagittis sed felis sed, blandit pharetra nisi. Suspendisse suscipit consectetur nisi, vel interdum enim lacinia vel. Nulla placerat malesuada libero, vitae egestas metus interdum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer consectetur porta augue ac suscipit. </div>
            </div>
            <div class="content bg-light w-75"> more content </div>
        </div>
    </div>
    <div class="content bg-secondary"> Footer </div>
</div>

Codeply demo