Bootstrap Grid 和 Flexbox，一列有水平和垂直滚动答案

【问题标题】：Bootstrap Grid and Flexbox, one column with horizontal and vertical scrollBootstrap Grid 和 Flexbox，一列有水平和垂直滚动
【发布时间】：2020-08-15 00:02:27
【问题描述】：

我有一个两栏布局页面，我希望它满足以下要求：

右列可以包含内容的大型数据网格，用户应该能够垂直和水平滚动它。一次在页面上显示所有内容太过分了。
左侧列的宽度和高度都很窄，应始终显示在 xl 屏幕尺寸的页面上。
左栏有两个按钮，对于 xl 屏幕尺寸，它们必须出现在页面底部。
页面应能响应平板电脑的屏幕尺寸。在平板电脑上，右栏应滑动到左栏下方，并且本身仍应可水平滚动。保留垂直滚动条本身也是可以接受的（尽管不是最佳的）。

除了使右列可水平滚动之外，我还有这个工作。如何获得右列的水平滚动？

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
</head>
<body>        
    <div class="container-fluid h-100">
        <div class="p-2 h-100">
            <div class="row d-flex h-100">
                <div class="col-xl-3 col-sm-12 d-flex flex-column h-100 align-items-start">
                    <h2>Left Column</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <div class="mt-auto">
                        <button href="javascript:void(0)">Button 1</button>
                        <button href="javascript:void(0)">Button 2</button>
                    </div>
                </div>
                <div class="col-xl-9 col-sm-12 d-flex flex-column h-100" align="center">
                    <h2>Right Column</h2>
                    <div class="limited mb-2">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>    
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>        
</body>
</html>

CSS：

html, body {
    height: 100%
}

.limited {
    flex-basis: 0px;
    flex-grow: 1;
    overflow-y: auto;
}

【问题讨论】：

标签： css twitter-bootstrap flexbox horizontal-scrolling

【解决方案1】：

如果我没听错的话，添加

    white-space: nowrap;

到那个列应该让它水平滚动而不是换行。

【讨论】：

是的，这行得通——我添加了空格：nowrap；到.limited。非常感谢！