Search code examples
csstwitter-bootstrapflexboxhorizontal-scrolling

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

I have a two-column layout page and I want it to meet these requirements:

  1. The right column can contain a large data grid of content and the user should be able to scroll that vertically and horizontally. It's way too much to show it all on the page at once.
  2. The left column, which has a slim width and short height, should always appear on the page for xl screen size.
  3. The left column has two buttons that must appear at the bottom of the page for xl screen size.
  4. The page should be responsive for tablet screen sizes. On tablet, the right column should slide below the left column and should itself still be horizontally scrollable. It's acceptable (though not optimal) for it to retain a vertical scroll bar itself too.

I have this working except for making the right column horizontally scrollable. How can I get a horizontal scroll for the right column?

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;
}
Solution

  • If I follow you correctly, adding

        white-space: nowrap;

    to that column should let it scroll horizontally and not wrap the text.