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

Question

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

右栏可以包含内容的大型数据网格，用户应该能够垂直和水平滚动该内容。一次在页面上显示所有内容太多了。
左栏的宽度较窄，高度较短，应始终出现在 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;
}

Answer 1

如果我没听错，加

    white-space: nowrap;

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

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

Bootstrap Grid and Flexbox, one column with horizontal and vertical scroll

css

horizontal-scrolling

flexbox

twitter-bootstrap