Open In App

How to create Flex Box Container with Scrollable Content in Bootstrap 5?

Last Updated : 16 Feb, 2024
Improve
Improve
Like Article
Like
Save
Share
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.

Approach

To 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=
          rel="stylesheet">
    <script src=
    </script>
    <link rel="stylesheet" href=
</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=
        </script>
    </main>
</body>
  
</html>


Output:

gfg16

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=
          rel="stylesheet">
    <script src=
    </script>
    <link rel="stylesheet" href=
</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=
                            alt="gfg"
                            class="w-50 d-block mx-auto">
                    </div>
                </div>
            </div>
        </div>
  
        <script src=
       </script>
    </main>
</body>
  
</html>


Output:

bandicam2024-02-0420-51-12-900-ezgifcom-crop



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads