'content exceeds from a fixed height column div

* {
    margin: 0;
    padding: 0;
}
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    box-sizing: border-box;
}
/**** Main Layout container ****/
.container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/**** Sidebar Static Left ****/
.sidebar {
    width: 12%;
    height: 100%;
    background-color: #f1f1f1;
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
}
/*** Fluid Container ***/
.fluid-container {
    width: 88%;
    height: 100%;
    background-color: cadetblue;
    position: absolute;
    left: 12%;
    overflow: hidden;
}
.navbar {
        width: 100%;
        text-align: center;
        background-color: skyblue;
        color: #484545;
        font-size: 1.7rem;
        display: flex;
        justify-content: center;
}

.header h1 {
    border: 2px solid skyblue;
    width: 180px;
    display: block;
    margin: 0 auto;
    font-size: 1.5rem;
    border-radius: 3px;
    background-color: skyblue;
    color: rgb(31, 30, 30);

}
/*** Title Box Containers ***/
.box-container {
    width: 100%;
    background-color: skyblue;
    display: flex;
    height: 100%;
}
.box {
    width: 50%;
    border: 2px solid rgb(229 221 221);
    background-color: skyblue;
    display: flex;
    overflow-x: scroll;
    height: calc(100% - 5%);
}
.item {
    width: 220px;
    border: 2px solid rgb(229 221 221);
   margin: 0 7px;
   background-color: #f1f1f1;
   min-width: 220px;
}
#item2 {
    overflow-y: scroll;
    height: calc(100% - 4.5%);
    min-width: 220px;
    width: 220px;
}
#item1 {
    height: calc(100% - 50%);
    width: 220px;
    min-width: 220px;
}
#item3 {
    height: calc(100% - 30%);
    width: 220px;
    min-width: 220px;
}
h1 {
    border: 2px solid skyblue;
}
h3 {
    border: 2px solid skyblue;
    text-align: center;
    border-radius: 7px;
    background-color: skyblue;
    color: #484545;
    font-size: 1.7rem;
}
p {
    text-align: left;
    padding: 0px 4px;
    color: rgb(31, 30, 30);
}

/* The side navigation menu */
.sidenav {
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    right: 0;
    background-color: #f1f1f1; 
    overflow-x: hidden; 
    padding-top: 60px; 
    transition: 0.5s;
  }
  span {
    float: right;
    margin: -41px 17px 0px 0px;
    color: black;
    font-size: 2.5rem;
    position: absolute;
    top: 35px;
    right: 5px;
    cursor: pointer;
  }
  
  /* The navigation menu links */
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
    cursor: pointer;
  }

  /* Position and style the close button (top right corner) */
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    color: black;
  }


  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }

  <div class="container">
        <div class="sidebar bg-slate-50">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas suscipit aliquid nobis eius harum
                ipsam eum perferendis modi excepturi laudantium, rerum recusandae nulla odio ullam aliquam aut quam ea
                cupiditate officiis? Tempora corrupti, officiis placeat quam praesentium quis dolores itaque repudiandae
                libero voluptates consequatur repellat, temporibus et laboriosam, accusantium ducimus quia distinctio a
                iste quaerat culpa ex cum. Officia laborum nesciunt quidem. Aliquid possimus soluta dolores obcaecati
                doloribus aut corrupti, at tenetur odit optio, facilis ipsam natus illum magni voluptas, quos animi.
                Sunt laudantium ut itaque, aperiam provident, nisi officiis inventore perspiciatis tenetur quidem
                sapiente natus vel ipsum omnis ad quia nemo ipsam in harum? Distinctio tempora quis facere animi
                molestiae iste quas voluptas iusto quaerat, officia modi aliquam earum saepe at est, suscipit vitae
                optio alias doloribus ea molestias illum impedit? Culpa sint, iure, illo provident officia minima
                consectetur, ea autem ut atque dolore quaerat dolor adipisci odio accusantium dolores dolorum odit rem
                dignissimos soluta. Veniam laborum, sint qui ad nemo ipsam voluptates magnam iure consectetur
                reprehenderit adipisci sed quos placeat ipsa aperiam repudiandae officia? Eum dicta quod, laudantium
                fugit harum delectus consequuntur facere amet autem eius maxime hic vel repudiandae eaque excepturi
                natus quia ullam temporibus veritatis illo libero. Ullam totam consequatur eius voluptas eaque odit odio
                corporis a quam eligendi. Ducimus nihil molestiae possimus quaerat alias voluptatibus velit consequatur
                reprehenderit? Voluptatem corporis, eaque omnis delectus explicabo unde, molestiae debitis fuga ad
                quaerat inventore impedit dolore recusandae deleniti voluptates enim tempora dignissimos numquam quod
                quam perferendis nisi tenetur hic saepe? Reprehenderit veritatis ex sed, repudiandae accusantium
                voluptates dignissimos velit vel, iure aspernatur doloremque dolores quasi provident placeat harum
                autem, accusamus ad non ducimus quae sint! Quo similique consequatur earum ducimus laboriosam, hic odit
                pariatur quas distinctio facere, fugiat, illo impedit nulla ratione iste quam quis autem beatae
                obcaecati esse laudantium? Adipisci et vero eum minus dolorum odio eligendi sint voluptatem nesciunt eos
                quisquam possimus ducimus nulla harum maxime neque alias culpa, dolores dolor laborum non! Ea
                praesentium dolor quidem tenetur neque, impedit similique exercitationem eligendi illo ipsa, minima iure
                doloremque veritatis! Similique, aspernatur sit tenetur facilis reprehenderit officia? Tenetur voluptas
                at quia, officiis vero esse nam deleniti et voluptatibus corrupti inventore voluptates necessitatibus
                eos ipsum, recusandae facilis ipsa quas suscipit enim illum voluptatum voluptatem numquam dolorem?
                Recusandae aperiam veritatis quidem? Quidem est maxime quo officiis esse similique maiores accusamus
                iure quis cum ad, nobis illum officia obcaecati saepe eaque dignissimos corrupti facilis aperiam vero
                quaerat quod? Nesciunt pariatur cupiditate saepe dolorum doloribus quisquam quis cumque commodi magnam,
                nostrum fuga, hic dolores quod neque perferendis exercitationem quo repudiandae facere! Porro molestiae,
                rem mollitia asperiores ducimus cum sapiente quam, sequi aut incidunt voluptatum ad autem ratione
                tempore illum, voluptatem magni non ipsam quo praesentium quaerat suscipit id. Perferendis corporis
                porro, doloremque praesentium beatae harum cumque ex. Minima similique reprehenderit consequuntur
                asperiores optio, repellat esse possimus neque consectetur delectus repudiandae, doloremque nesciunt
                repellendus debitis animi distinctio officia fuga ullam molestias corporis architecto cumque eos nisi.
                Voluptas optio hic veritatis culpa esse?</p>
        </div>
        <div class="fluid-container">
            <div class="navbar">
                <div class="header">
                    <h1>Header Section</h1>
                    <div id="mySidenav" class="sidenav">
                        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                        <a href="#">About</a>
                        <a href="#">Services</a>
                        <a href="#">Clients</a>
                        <a href="#">Contact</a>
                    </div>
                </div>

                <span onclick="openNav()">
                    <ion-icon name="menu-outline"></ion-icon>
                </span>
            </div>
           
                
            <div class="box-container">
                <div id="box1" class="box">
                    <div id="item1" class="item bg-slate-50">
                        <h3>Title 1</h3> 
                    </div>
                    <div id="item2" class="item bg-slate-50">
                        <h3>Title 2</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam laborum doloremque quas
                            tempora deleniti molestiae ullam nostrum repellat quae commodi, quaerat labore, rerum
                            voluptatibus perferendis ex cupiditate excepturi officiis! Obcaecati quisquam sit vero a,
                            vitae laborum eius reiciendis placeat nemo provident ea labore incidunt? Distinctio,
                            explicabo? Ab asperiores eos quasi eum blanditiis ipsum ut reprehenderit nostrum dignissimos
                            cupiditate, ipsa facere inventore laudantium ducimus dicta sunt quidem, nam harum. Esse
                            iure, voluptate ducimus a voluptatem expedita quas nam officia obcaecati saepe
                            necessitatibus exercitationem quo iusto, libero omnis? Earum esse, dolor quo non vitae
                            repellat odit. Ad voluptates iure tenetur explicabo excepturi!</p>
                    </div>
                    <div id="item3" class="item bg-slate-50">
                        <h3>Title 3</h3>
                    </div>
                </div>
                <div id="box2" class="box">
                    <div id="item1" class="item bg-slate-50">
                        <h3>Title A</h3>
                    </div>
                    <div id="item2" class="item bg-slate-50">
                        <h3>Title B</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam laborum doloremque quas
                            tempora deleniti molestiae ullam nostrum repellat quae commodi, quaerat labore, rerum
                            voluptatibus perferendis ex cupiditate excepturi officiis! Obcaecati quisquam sit vero a,
                            vitae laborum eius reiciendis placeat nemo provident ea labore incidunt? Distinctio,
                            explicabo? Ab asperiores eos quasi eum blanditiis ipsum ut reprehenderit nostrum dignissimos
                            cupiditate, ipsa facere inventore laudantium ducimus dicta sunt quidem, nam harum. Esse
                            iure, voluptate ducimus a voluptatem expedita quas nam officia obcaecati saepe
                            necessitatibus exercitationem quo iusto, libero omnis? Earum esse, dolor quo non vitae
                            repellat odit. Ad voluptates iure tenetur explicabo excepturi!</p>
                    </div>
                    <div id="item3" class="item bg-slate-50">
                        <h3>Title C</h3>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <script>

        function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
        }


        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
        }
    </script>

    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

as you guys can see the title 1 column it has a fixed height and i want it that way, when i add content to it goes beyond. all im Basically trying to achieve is when, more text is added, the containing div will grow in height. When the bottom of the containing div reaches the bottom of the browser window, the vertical scrollbar will appear.

html css flexbox

Solution 1:^[1]

You can use the max-height and overflow properties.

Try to give it max-height: and make its value equal to the height of the screen.

and then give it overflow:auto so that when the text exceeds the div height, a scroll will bar appear.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Omar Osman

'content exceeds from a fixed height column div

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]