2

How can I make sure that the two columns fit the remaining height, but also if there are more content in them they don't overflow, but scrolls?

I'm using Bootstrap 5.

html {
    position: relative;
    min-height: 100%;
}

main {
    height: 100%;
}
<!-- CSS only -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    </head>
    
    <body>
        <main>

            <header class="container-fluid d-flex">
            
                header
            </header>
            
            <div class="container-fluid">
                <h1>Title</h1>

                <div class="row">
                    <div class="col-3 d-flex bg-primary">
                      Column1
                    </div>

                    <div class="col d-flex bg-secondary">
                      Column 2
                    </div>
                </div> <!-- / .row -->

            </div>
        </main>
    </body>
</html>
levipadre
  • 569
  • 7
  • 31

1 Answers1

-1

You should add the CSS property on columns,

overflow:auto

this property add the scroll only when content is more.

Geetanjali Katare
  • 55
  • 1
  • 9
  • Thanks, there is a class for that either `overflow-auto`, but it still needs to fill the remaining space though – levipadre Jan 06 '22 at 09:56