Avoid unnecessary use of containers...
The property overflow: auto; is effective only when the content inside the container exceeds the width or height of the container itself. In such cases, a scroll bar will be automatically added.
Consider this code snippet...
HTML
<div class="container">
<div class="column1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aperiam, repellendus sequi debitis dolorum illo hic sed, cumque voluptatibus magnam sint architecto ullam laboriosam ipsa molestias culpa ab possimus soluta nobis omnis? Ab praesentium consectetur, est laborum voluptatem vitae, accusantium cum odio voluptates consequatur mollitia maxime assumenda sapiente dignissimos quo quis? Sit nulla esse deleniti odio asperiores perspiciatis, autem animi impedit quasi laborum minus labore natus delectus quaerat dolorem. Soluta tempora animi id quo recusandae nulla, cupiditate itaque voluptatem odit. Veritatis nemo quos temporibus soluta voluptas, quae facilis vel laboriosam labore. Debitis illo, harum fugiat quo laboriosam tenetur mollitia perspiciatis.
</p>
</div>
<div class="column2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aperiam, repellendus sequi debitis dolorum illo hic sed, cumque voluptatibus magnam sint architecto ullam laboriosam ipsa molestias culpa ab possimus soluta nobis omnis? Ab praesentium consectetur, est laborum voluptatem vitae, accusantium cum odio voluptates consequatur mollitia maxime assumenda sapiente dignissimos quo quis? Sit nulla esse deleniti odio asperiores perspiciatis, autem animi impedit quasi laborum minus labore natus delectus quaerat dolorem. Soluta tempora animi id quo recusandae nulla, cupiditate itaque voluptatem odit. Veritatis nemo quos temporibus soluta voluptas, quae facilis vel laboriosam labore. Debitis illo, harum fugiat quo laboriosam tenetur mollitia perspiciatis.
</p>
</div>
<div class="column3">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aperiam, repellendus sequi debitis dolorum illo hic sed, cumque voluptatibus magnam sint architecto ullam laboriosam ipsa molestias culpa ab possimus soluta nobis omnis? Ab praesentium consectetur, est laborum voluptatem vitae, accusantium cum odio voluptates consequatur mollitia maxime assumenda sapiente dignissimos quo quis? Sit nulla esse deleniti odio asperiores perspiciatis, autem animi impedit quasi laborum minus labore natus delectus quaerat dolorem. Soluta tempora animi id quo recusandae nulla, cupiditate itaque voluptatem odit. Veritatis nemo quos temporibus soluta voluptas, quae facilis vel laboriosam labore. Debitis illo, harum fugiat quo laboriosam tenetur mollitia perspiciatis.
</p>
</div>
</div>
CSS
.container{
display: flex;
}
.column1{
width: 20%;
height: 300px;
background-color: rgb(211, 210, 210);
overflow: auto;
}
.column2{
width: 60%;
height: 300px;
background-color: rgb(255, 255, 255);
overflow: auto;
}
.column3{
width: 20%;
height: 300px;
background-color: rgb(211, 210, 210);
overflow: auto;
}
Output
A scroll bar will be included automatically when required.
If you prefer a scroll bar on a specific axis, simply change overflow: auto; to either overflow-y: auto; or overflow-x: auto;.
Avoid using overflow: scroll; as it will always display a scroll bar irrespective of whether it is necessary or not. Hence, refrain from using this method.