How to create Flex Box Container with Scrollable Content in Bootstrap 5? Last Updated : 30 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Bootstrap is a framework that is suitable for mobile-friendly web development. It means the code and the template available on Bootstrap apply to various screen sizes. It is responsive for every screen size.A Flexbox container with scrollable content typically involves using the flex utility classes to create a flexible container and then applying some basic classes to enable scrollable content.ApproachTo create a Flex Box container with scrollable content:Add the d-flex, flex-column utility classes to the container and also set its any height like 25vh (height: 25vh;), etc.Then to make the Flexbox container scrollable, use the overflow-y: auto; to ensure that a vertical scrollbar appears when the content exceeds the height.Syntax<div class="col-12 d-flex flex-column h-25"> <div class="flex-grow-1 overflow-auto" style="height: 50vh; overflow-y: auto"> ... </div></div>Example 1: Demonstration of usage of a flexbox container with scrollable content. HTML <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <main class="container"> <h1 class="text-success text-center"> GeeksforGeeks </h1> <h2 class="text-center"> How to create Flex Box Container with Scrollable Content in Bootstrap 5? </h2> <div class="container-fluid"> <div class="row"> <div class="col-12 d-flex flex-column h-25"> <div class="flex-grow-1 overflow-auto" style="height: 50vh; overflow-y: auto"> <p> GeeksforGeeks offers the Freelance Technical Content Writing opportunity for all those individuals who have some good article writing skills and at the same time are knowledgeable enough to write about a particular topic or domain. This will not only help you in showcasing and enhancing your technical writing skills to the world but will also reward you with some good remuneration and other worthwhile benefits. </p> <p> GeeksforGeeks offers the Freelance Technical Content Writing opportunity for all those individuals who have some good article writing skills and at the same time are knowledgeable enough to write about a particular topic or domain. This will not only help you in showcasing and enhancing your technical writing skills to the world but will also reward you with some good remuneration and other worthwhile benefits. </p> </div> </div> </div> </div> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </main> </body> </html> Output:Example 2: Demonstration of the usage of a flexbox container with image scrollable content. HTML <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <main class="container"> <h1 class="text-success text-center"> GeeksforGeeks </h1> <h2 class="text-center"> How to create Flex Box Container with Scrollable Content in Bootstrap 5? </h2> <div class="container-fluid"> <div class="row"> <div class="col-12 d-flex flex-column h-25"> <div class="flex-grow-1 overflow-auto" style="height: 50vh; overflow-y: auto"> <p> GeeksforGeeks is a leading platform that provides computer science resources and coding challenges for programmers and technology enthusiasts, along with interview and exam preparations for upcoming aspirants. With a strong emphasis on enhancing coding skills and knowledge, it has become a trusted destination for over 12 million plus registered users worldwide. </p> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png" alt="gfg" class="w-50 d-block mx-auto"> </div> </div> </div> </div> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </main> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create full width container in bootstrap5? T tarunsinghwap7 Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-Questions Bootstrap-5 Similar Reads How to create full width container in bootstrap5? Bootstrap containers are content holders that are used to align, add margins and padding to your content. Bootstrap has three different container classes, namely: .container .container-fluid .container-{breakpoint} Width of a container varies in accordance with its class. We can create a full width 1 min read How to stretch flexbox to fill the entire container in Bootstrap? We are given an HTML document (linked with Bootstrap) with a flexbox and a container. The goal is to stretch the flexbox to fill the entire container. Table of Content Using Bootstrap flex-fill classUsing Bootstrap's flex-grow ClassUsing Bootstrap flex-fill classThe .flex-fill class stretches the wi 3 min read How to Create Scrollable Sidebar with Icons in Bootstrap 5 ? To create a scrollable sidebar with icons in Bootstrap 5, we can use the Bootstrap grid system for layout, incorporating a container, row, and column structure. Place your sidebar content inside a div with the appropriate classes to control its appearance. Use Bootstrap's utility classes and icon li 2 min read How to make horizontal scrollable in a bootstrap row? Here is the task to make horizontally scrollable in a bootstrap row. It can be done by the following approach: Approach: Making all the div element in inline using display: inline-block; propertyAdding the scroll bar to all the div element using overflow-x: auto; property.white-space: nowrap; proper 1 min read How to create Scrollable HTML Comment box ? The purpose of this article is to create a scrollable comment box using HTML and CSS3 property. An HTML scrollbox is a box with expanding scroll bars when the contents of the box are too huge to fit.Approach: For the scope of this article, we will make a div element that displays the comments, and w 2 min read How to make vertical scrollable rows in bootstrap? In Bootstrap, creating vertically scrollable rows allows for efficient display of large content within a limited space. By enabling vertical scrolling, users can view content that exceeds the visible area without altering the overall page layout, improving usability.It can be done by the following a 2 min read Like