Make Div Scrollable

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

Making a Div Scrollable

Add overflow: scroll; to your CSS.

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 scrollable section inside div that fills in all the remaining space of said div

Run snippet, and click 'full page' then scale browser and scrolling area should be dynamic in height. Only tested in Chrome btw.

const App = () => {

  return (
    <div className="container">
      <div className="inner">
        <h2>My Content</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <h3>Scrollable section that must fill in the rest of the space</h3>
        <div className="scrollable-div">
          {[...Array(50).keys()].map((_, index) => (
            <div>item {index}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.container {
  display: flex;
  flex-direction: column;
  border: 2px solid #2B3239;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.inner {
  padding: 12px;
  background: #EFF2F5;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.scrollable-div {
  background: white;
  border: 2px solid #FF6F6F;
  flex-grow: 1;
  overflow: scroll;
  padding: 12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

CSS Flex - how do I make div content scrollable?

here is what could be your CSS , I added border so you can see where stands some of your boxes. Using flexbox on so many levels requires to follow clearly what you are doing and see where flex is avalaible and needed.

* {
  box-sizing: border-box;
}
.drawer {
  width: 240px;/* without a flex parent that works too */
  height: 100vh;/* example for a full screen height */
  overflow-y: hidden;
  padding: 10px 0;
  border: solid;
}

.drawerContainer {
  height: 100%;
  padding-bottom: 10px;
  padding-top: 10px;
}

.sideboxWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: solid green;
  overflow: hidden;
}

.sidebox {
  margin: 10px;
  padding: 0px;
  flex-basis: 50%;/* make it half */
  display: flex;
  flex-direction: column;
  min-height: 0;/* what is needed */
}

.boxContent {
  flex-grow: 1;
  overflow-y: auto;
}

Make sidebar div scrollable

You can achieve the scroll with your current css and markup by adding a class to the content that is supposed to be scrolling, and give that class height: 100%; overflow: auto;. You can see it working in the snippet below.

jQuery(function($) {  $("#side").click(function() {    $('#slidable').toggleClass("open");  });})

#side {  position:absolute;  right:100%;  width: 50px;  height: 50px;  z-index: 1000000;  color:black;}
#slidable {  position: fixed;  top:0;  height: 100vh;  background: black;  width: 200px;  left: 100%;  transition: 0.4s;  z-index: 1000000;  color:black;  text-align:center;  font-size:25px;  font-weight: 300;  color:white;}
#slidable.open{  left: calc(100% - 200px);}
.fa {  font-size:30px!;  margin-top:25px;  color:black;}.scrollableContent{    height: 100%;    overflow: auto;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slidable" class="slidable">  <div id="side" class="side icon">      <i class="fa fa-bars"></i>  </div>  <div class="scrollableContent">      <p>Sidebar</p>        <br>        <br>        <br>        <br>        <br>        <br>        <br>        <br>        <br>        <br>        Content that you shouldn't be able to see without scrolling  </div></div><div id="content" class="content">  <p>test here</p></div>