带有嵌套列和滚动条的引导 flexbox 布局答案

【问题标题】：Bootstrap flexbox layout with nested columns and scrollbars带有嵌套列和滚动条的引导 flexbox 布局
【发布时间】：2020-02-05 04:45:21
【问题描述】：

我正在尝试实现这种布局：

这是我的代码：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="en" class="h-100">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Flex Test</title>

    <script src="http://flex.test/js/app.js" defer></script>
    <link href="http://flex.test/css/app.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
    <nav class="navbar navbar-expand-md navbar-light">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fa fa-directions text-primary"></i> Flex Test
            </a>
        </div>
    </nav>

    <div class="container h-100 py-4">
        <div class="row h-100">
            <div class="col h-100">
                <div class="d-flex flex-column h-100">
                    <div class="border-bottom bg-success">
                        Lorem ipsum.
                    </div>
                    <div class="bg-primary flex-grow-1 mh-100 overflow-auto">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </div>
                </div>
            </div>
            <div class="col h-100 bg-danger overflow-auto">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
        </div>
    </div>
</body>
</html>

如果红色和蓝色框没有高于页面高度的内容，它可以正常工作。一旦内容太长，就会使页面变高。我希望这些框填充页面高度，但如果它们的内容高于我想要引入滚动条的框。

我不知道如何通过 flexbox 来实现。

【问题讨论】：

你能添加你的css代码吗？

标签： css twitter-bootstrap flexbox

【解决方案1】：

我想我明白了：

<div class="container flex-grow-1 my-4">
    <div class="row h-100">
        <div class="col">
            <div class="d-flex flex-column h-100 bg-info">
                <div class="border-bottom bg-success">
                    sort, search, post
                </div>
                <div class="bg-danger flex-grow-1 overflow-auto" style="height: 0;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo lacus, quis tempor lacus maximus vitae. Maecenas maximus consequat ultricies. Praesent eget scelerisque ipsum, at dictum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel eleifend ligula. Ut varius non elit non faucibus. Morbi nec facilisis ligula. Donec sit amet consectetur nunc. Pellentesque id nisl ac neque pulvinar convallis. In ut purus vitae urna placerat lobortis.
                    Duis accumsan tortor non nisl sollicitudin commodo. Ut mollis sit amet dui nec scelerisque. Fusce at elit mauris. Ut risus velit, vehicula in lacus et, tempor pellentesque neque. Aenean dui massa, lobortis non euismod id, placerat sed sem.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo lacus, quis tempor lacus maximus vitae. Maecenas maximus consequat ultricies. Praesent eget scelerisque ipsum, at dictum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel eleifend ligula. Ut varius non elit non faucibus. Morbi nec facilisis ligula. Donec sit amet consectetur nunc. Pellentesque id nisl ac neque pulvinar convallis. In ut purus vitae urna placerat lobortis.
                    Duis accumsan tortor non nisl sollicitudin commodo. Ut mollis sit amet dui nec scelerisque. Fusce at elit mauris. Ut risus velit, vehicula in lacus et, tempor pellentesque neque. Aenean dui massa, lobortis non euismod id, placerat sed sem.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo lacus, quis tempor lacus maximus vitae. Maecenas maximus consequat ultricies. Praesent eget scelerisque ipsum, at dictum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel eleifend ligula. Ut varius non elit non faucibus. Morbi nec facilisis ligula. Donec sit amet consectetur nunc. Pellentesque id nisl ac neque pulvinar convallis. In ut purus vitae urna placerat lobortis.
                    Duis accumsan tortor non nisl sollicitudin commodo. Ut mollis sit amet dui nec scelerisque. Fusce at elit mauris. Ut risus velit, vehicula in lacus et, tempor pellentesque neque. Aenean dui massa, lobortis non euismod id, placerat sed sem.
                </div>
            </div>
        </div>
        <div class="col">
            <div class="d-flex flex-column h-100 bg-info">
                <div class="bg-danger flex-grow-1 overflow-auto" style="height: 0;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo lacus, quis tempor lacus maximus vitae. Maecenas maximus consequat ultricies. Praesent eget scelerisque ipsum, at dictum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel eleifend ligula. Ut varius non elit non faucibus. Morbi nec facilisis ligula. Donec sit amet consectetur nunc. Pellentesque id nisl ac neque pulvinar convallis. In ut purus vitae urna placerat lobortis.
                    Duis accumsan tortor non nisl sollicitudin commodo. Ut mollis sit amet dui nec scelerisque. Fusce at elit mauris. Ut risus velit, vehicula in lacus et, tempor pellentesque neque. Aenean dui massa, lobortis non euismod id, placerat sed sem.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo lacus, quis tempor lacus maximus vitae. Maecenas maximus consequat ultricies. Praesent eget scelerisque ipsum, at dictum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel eleifend ligula. Ut varius non elit non faucibus. Morbi nec facilisis ligula. Donec sit amet consectetur nunc. Pellentesque id nisl ac neque pulvinar convallis. In ut purus vitae urna placerat lobortis.
                    Duis accumsan tortor non nisl sollicitudin commodo. Ut mollis sit amet dui nec scelerisque. Fusce at elit mauris. Ut risus velit, vehicula in lacus et, tempor pellentesque neque. Aenean dui massa, lobortis non euismod id, placerat sed sem.
                </div>
            </div>
        </div>
    </div>
</div>

如果有更好的方法，我会全力以赴。

【讨论】：

【解决方案2】：

请检查我的解决方案。这里我提供了一种使用 flex 布局的简单方法。

body {
  overflow: hidden;
}

.left {
  height: 100vh;
  background-color: orange;
  display: flex;
  flex-direction: column;
}
.left .head {
  min-height: 10px;
  background-color: red;
  flex: 0 0 auto;
}
.left .content {
  overflow-y: auto;
}

.right {
  height: 100vh;
  overflow: auto;
  background-color: yellow;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
  <div class="col-6 px-0">
    <div class="left">
      <div class="head"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet repellendusLorem ipsum dolor sit amet consectetur adipisicing elit. Amet </div>
      <div class="content">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet repellendusLorem ipsum dolor sit amet consectetur adipisicing elit. Amet repellendusLorem ipsum dolor sit amet consectetur adipisicing elit. Amet repellendusLorem ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus
      </div>
    </div>
  </div>
  <div class="col-6 px-0">
    <div class="right">
      <div class="content">
        ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis  ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis
      </div>
    </div>

  </div>
</div>

【讨论】：