Scrollbar Without Fixed Height/Dynamic Height with Scrollbar

Scrollbar without fixed height/Dynamic height with scrollbar

Flexbox is a modern alternative that lets you do this without fixed heights or JavaScript.

Setting display: flex; flex-direction: column; on the container and flex-shrink: 0; on the header and footer divs does the trick:

HTML:

<div id="body">
    <div id="head">
        <p>Dynamic size without scrollbar</p>
        <p>Dynamic size without scrollbar</p>
        <p>Dynamic size without scrollbar</p>  
    </div>
    <div id="content">
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
    </div>
    <div id="foot">
        <p>Fixed size without scrollbar</p>
        <p>Fixed size without scrollbar</p>
    </div>  
</div>

CSS:

#body {
    position: absolute;
    top: 150px;
    left: 150px;
    height: 300px;
    width: 500px;
    border: black dashed 2px;
    display: flex;
    flex-direction: column;
}

#head {
    border: green solid 1px;
    flex-shrink: 0;
}

#content{
    border: red solid 1px;
    overflow-y: auto;
    /*height: 100%;*/
}

#foot {
    border: blue solid 1px;
    height: 50px;
    flex-shrink: 0;
}

How to make dynamic div overflow without fixed height

Flex items are set to flex-shrink: 1 by default. This means they can shrink to prevent an overflow of the container. In your case, you may need to disable this feature (flex-shrink: 0).

Also, consider using height: 100vh, instead of height: 100% on your flex container. Percentage heights are tricky and often require the parent to have a defined height.

See this post for details: Working with the CSS height property and percentage values

Lastly, remove justify-content: center from your flex container. It makes content inaccessible via scroll in some cases.

See this post for details: Can't scroll to top of flex item that is overflowing container

Make these adjustments to your code:

#body-wrapper {
  display: flex;
  /* height: 100%; */
  height: calc(100vh - 80px); /* subtract footer height */
}

#section1 {
  background-color: #191919;
  display: flex;
  align-items: center;
  /* justify-content: center; */ /* remove to avoid scrolling problems */
  flex-direction: column;
  width: 100%;
  overflow: auto;
}

#section1-wrapper {
  width: 80%;
  display: flex;
  font-family: 'Roboto';
  padding-top: 50px;
  padding-bottom: 50px;
  align-items: center;
  flex-direction: column;
  flex-shrink: 0; /* add to disable flex default shrinking feature */
}

jsFiddle demo

Scrolling div without fixed height

You could stretch the div using absolute positioning. This way it will always take the size of the browser window (or the closest positioned ancestor).

Given this HTML:

<div id="gridcontainer"></div>

the CSS should be something like:

#gridcontainer {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  overflow: auto;
}

Live Demo

Scrollable div without fixed height not working

You could use padding-bottom:100% if I understand your question correctly

http://jsfiddle.net/Msy4E/3/

.lower-content {
  border-top: 1px solid #b2b2b2;
  margin: 1% auto 0;
  padding: 1% 0 0;
  width: 1200px;
}

.lower-content .col-1 {
  height: 100%;
  position: relative;
  width: 27%;
  padding-bottom:100%;
  background:lightgray;
}
.lower-content .col-1 .scrollbox {
  font-size: 1.2em;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

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>

Auto height div with overflow and scroll when needed

Well, after long research, i found a workaround that does what i need:
http://jsfiddle.net/CqB3d/25/

CSS:

body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
}

#caixa{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#framecontentTop, #framecontentBottom{
    position: absolute; 
    top: 0;   
    width: 800px; 
    height: 100px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white; 
}

#framecontentBottom{
    top: auto;
    bottom: 0; 
    height: 110px; /*Height of bottom frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white;
}

#maincontent{
    position: fixed; 
    top: 100px; /*Set top value to HeightOfTopFrameDiv*/
    margin-left:auto;
    margin-right: auto;
    bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
    overflow: auto; 
    background: #fff;
    width: 800px;
}

.innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
    padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}

* html #maincontent{ /*IE6 hack*/
    height: 100%; 
    width: 800px; 
}

HTML:

<div id="framecontentBottom">
    <div class="innertube">
        <h3>Sample text here</h3>
    </div>
</div>
<div id="maincontent">
    <div class="innertube">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text...
    </div>
</div>

might not work with the horizontal thingy yet, but, it's a work in progress!

I basically dropped the "inception" boxes-inside-boxes-inside-boxes model and used fixed positioning with dynamic height and overflow properties.

Hope this might help whoever finds the question later!

EDIT: This is the final answer.

Bootstrap 4 - How to make a div without a fixed height scroll within another div whose height is set to 100%

What I understand from your problem depiction is that you want left column to be exactly same as right even if right column height is varying, and off course for left column to have scroll you need to fix it's height so you have done.

.recent-articles-list { max-height: 30rem; }.

if that's the case, the good solution for this situation is the code below

.recent-articles {
  background-color: #fff;
  padding: 1rem;
  height: 100%;
  position: relative;
}

.recent-articles-list {
  padding-right: 1rem;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

Scrollbar Without Fixed Height/Dynamic Height with Scrollbar