Making a Div Vertically Scrollable Using Css

Making a div vertically scrollable using CSS

You have it covered aside from using the wrong property. The scrollbar can be triggered with any property overflow, overflow-x, or overflow-y and each can be set to any of visible, hidden, scroll, auto, or inherit. You are currently looking at these two:

auto - This value will look at the width and height of the box. If they are defined, it won't let the box expand past those boundaries. Instead (if the content exceeds those boundaries), it will create a scrollbar for either boundary (or both) that exceeds its length.
scroll - This values forces a scrollbar, no matter what, even if the content does not exceed the boundary set. If the content doesn't need to be scrolled, the bar will appear as "disabled" or non-interactive.

If you always want the vertical scrollbar to appear:

You should use overflow-y: scroll. This forces a scrollbar to appear for the vertical axis whether or not it is needed. If you can't actually scroll the context, it will appear as a"disabled" scrollbar.

If you only want a scrollbar to appear if you can scroll the box:

Just use overflow: auto. Since your content by default just breaks to the next line when it cannot fit on the current line, a horizontal scrollbar won't be created (unless it's on an element that has word-wrapping disabled). For the vertical bar,it will allow the content to expand up to the height you have specified. If it exceeds that height, it will show a vertical scrollbar to view the rest of the content, but will not show a scrollbar if it does not exceed the height.

Make div scrollable

Use overflow-y:auto for displaying scroll automatically when the content exceeds the divs set height.

See this demo

How to create a scrollable Div Tag Vertically?

Well, your code worked for me (running Chrome 5.0.307.9 and Firefox 3.5.8 on Ubuntu 9.10), though I switched

overflow-y: scroll;

overflow-y: auto;

Demo page over at: http://davidrhysthomas.co.uk/so/tableDiv.html.

xhtml below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Div in table</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

        <style type="text/css" media="all">

        th      {border-bottom: 2px solid #ccc; }

        th,td       {padding: 0.5em 1em; 
                margin: 0;
                border-collapse: collapse;
                }

        tr td:first-child
                {border-right: 2px solid #ccc; } 

        td > div    {width: 249px;
                height: 299px;
                background-color:Gray;
                overflow-y: auto;
                max-width:230px;
                max-height:100px;
                }
        </style>

    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">

    </script>

</head>

<body>

<div>

    <table>

        <thead>
            <tr><th>This is column one</th><th>This is column two</th><th>This is column three</th>
        </thead>



        <tbody>
            <tr><td>This is row one</td><td>data point 2.1</td><td>data point 3.1</td>
            <tr><td>This is row two</td><td>data point 2.2</td><td>data point 3.2</td>
            <tr><td>This is row three</td><td>data point 2.3</td><td>data point 3.3</td>
            <tr><td>This is row four</td><td><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies mattis dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum a accumsan purus. Vivamus semper tempus nisi et convallis. Aliquam pretium rutrum lacus sed auctor. Phasellus viverra elit vel neque lacinia ut dictum mauris aliquet. Etiam elementum iaculis lectus, laoreet tempor ligula aliquet non. Mauris ornare adipiscing feugiat. Vivamus condimentum luctus tortor venenatis fermentum. Maecenas eu risus nec leo vehicula mattis. In nisi nibh, fermentum vitae tincidunt non, mattis eu metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc vel est purus. Ut accumsan, elit non lacinia porta, nibh magna pretium ligula, sed iaculis metus tortor aliquam urna. Duis commodo tincidunt aliquam. Maecenas in augue ut ligula sodales elementum quis vitae risus. Vivamus mollis blandit magna, eu fringilla velit auctor sed.</p></div></td><td>data point 3.4</td>
            <tr><td>This is row five</td><td>data point 2.5</td><td>data point 3.5</td>
            <tr><td>This is row six</td><td>data point 2.6</td><td>data point 3.6</td>
            <tr><td>This is row seven</td><td>data point 2.7</td><td>data point 3.7</td>
        </body>



    </table>

</div>

</body>

</html>

How to make a div vertically scrollable

Use the css below

.pic-container {
    width: 50px;
    height: 200px;
    overflow-y: scroll;
    overflow-x:hidden;
}

EDIT :- Added a '.' before the class name
see the fiddle link HERE

HTML: How to create a DIV with only vertical scroll-bars for long paragraphs?

Use overflow-y. This property is CSS 3.

Vertically scrollable div without overlapping parent

add overflow: auto to parent

#parent { height: 100px; width:300px; background-color:red;   overflow: auto;}
#child { background-color: blue;   /*height: 150px;*/  width: 250px;   color: #fff;  display: inline-block;}

<div id="parent">  <div id="child">    <p>some text</p>    <p>some text</p>    <p>some text</p>    <p>some text</p>    <p>some text</p>    <p>some text</p>    <p>some text</p>  </div></div>

Vertically scrollable div with dynamic height

.wrapper {    display: flex;    flex-direction: row;    flex-wrap: wrap;}.non-scrollable-container {    display: flex;    flex-direction: row;    width:100%;    background-color:#ccc;    height:auto;}
.scrollable-row {    display: flex;    flex-direction: row;    width:100%;    margin-top:10px;}
.scrollable-container {    display: flex;    flex-direction: column;    width:33.33%;    background-color:#ccc;    height:100px;    overflow:auto;    padding:5px;}

<div class="wrapper">  <div class="non-scrollable-container">    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  </div>  <div class="scrollable-row">    <div class="scrollable-container">      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.    </div>    <div class="scrollable-container">      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.    </div>    <div class="scrollable-container">      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.    </div>  </div></div>

Div to expand vertically, but be scrollable if it has filled its container

The key is how you calculate the height for the <main> and usage of flex, esp. flex-grow, flex-shrink.

`<header>`, `<main>` and `<footer>`

The second row doesn't have to fill in all remaining pale green place. It's height can be flexible.

So I assume you want the <header> and <footer> always stay on top and bottom. Instead of regular absolute positioning approach, I want to explicitly set the heights for them, as well as for <main>.

HTML

<header>header</header>
<main class="container-fluid"></main>
<footer>footer</footer>

SCSS

$custom-header-height: 3rem;
$custom-footer-height: 2rem;

header, footer {
    background-color: var(--gray);

    // In order to position the text to the center, like your picture
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

header {
    height: $custom-header-height;
}

footer {
    height: $custom-footer-height;
}

main {
    // Calculate the height for main, which is 100% viewport height -
    // height of header - height of footer
    height: calc(100vh - #{$custom-header-height} - #{$custom-footer-height});
    background-color: var(--teal);
}

Result

Sample Image

This gives you the playground you can build stuff on.

First Row

The first row is free to expand as high as its contents, but you don't want it to take up any free space. That's why you set flex-grow: 0;. Also when you resize the window and the space for first row is shrinking, you don't want the cards go over the row. That's why you set flex-shrink: 0;. We might as well use the shortcut flex: 0 0 auto; for those 2.

But in order to set that, the first row (as well as the second row) needs to be flexbox children. So we set display:flex; on its parent - <main>.

HTML

<header>header</header>
<main class="container-fluid">
    <div class="row first-row">
        <div class="col-6">
            <div class="card">...</div>
        </div>
        <div class="col-6">
            <div class="card">...</div>
        </div>
    </div>
</main>
<footer>footer</footer>

SCSS (In addition)

main {
    display: flex;
    flex-flow: column nowrap;
}

.first-row {
    // I purposely make first row's background yellow so that you can see it
    background-color: var(--yellow);
    flex: 0 0 auto;
}

Result

Sample Image

Second Row

The key here is to make the <card> not to grow when there is space, but shrink on limited space, which is the default of flexbox children: flex: 0 1 auto;

But again, in order to use that, its parent needs to display: flex;. Here the parent is col-6 since we want to use bootstrap grid system.

HTML

<header>header</header>
<main class="container-fluid">
    <div class="row first-row">
        <div class="col-6">
            <div class="card">...</div>
        </div>
        <div class="col-6">
            <div class="card">...</div>
        </div>
    </div>
    <div class="row second-row">
        <div class="col-6">
            <div class="card">
                ...
                ...
                ...
            </div>
        </div>
    </div>
</main>
<footer>footer</footer>

SCSS (In addition)

.second-row {
    // I purposely make second row's background to be blue so that you can see it
    background-color: var(--blue);

    // Any column, class name starts as "col-"
    [class*="col-"] {
        display: flex;
        flex-flow: column nowrap;

        // So that when the second row is compressed to 0, it doesn't show
        // the row completely.
        min-height: 0;

        .card {
            // flex-grow: 0;
            // flex-shrink: 1;
            // Might as well just set it
            // flex: 0 1 auto;
            // But this is the default of flexbox children so we don't need to set
            // it here.

            .card-body {
              overflow-y: auto;
            }
        }
    }
}

Result

The second row doesn't have to fill in all remaining pale green place. It's height can be flexible.

Sample Image

An illustration of what I'd like to achieve

Sample Image

The page should only have scrollbars if the second row is already "fully compressed" (0 height) and still the header + first row + footer can't fit in the viewport

Sample Image

Notes

There is still a funkiness when the second row is fully compressed. The scrollbar is still hanging there and I don't know how to get rid of it.
The code can be simplified a little bit without usage of bootstrap grid system.

Demo

https://codepen.io/anon/pen/XBqyxZ

Sorry for this lengthy post. If you want to know more about flexbox, here is a great guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Making a Div Vertically Scrollable Using Css