I am not able to make div height 100% & scrollable in CSS

Question

Here is my fiddle

I am trying to make div of 100% height and also it should be scrollable when there is more content in that particular div.

I am using flex properties but my code not working properly - it doesn't scroll when the content is more than the div height.

 body { font-family: 'arial'; } header, footer { background: #333; height: 30px; color: #fff; } img { width: 100%; } .wrapper { bottom: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; position: relative; top: 0; width: 100%; background: #ccc; } .content { height: 100%; width: 100%; -webkit-box-flex: 2; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 2; /* OLD - Firefox 19- */ -webkit-flex: 2; /* Chrome */ -ms-flex: 2; /* IE 10 */ flex: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .content .inner_content { display: table; width: 100%; height: 100%; } .content .inner_content .left_content { display: table-cell; background: yellow; width: 50%; padding: 10px; } .content .inner_content .right_content { display: table-cell; background: green; width: 60%; padding: 10px; } .scrollable-content { background: #ddd; padding: 10px; } 

 <div class="wrapper"> <header>this is header</header> <div class="content"> <div class="inner_content"> <div class="left_content"> <div class="image"> <img src="http://l7.alamy.com/zooms/19704c162b4446c984a50bfdb49b45ac/a-colour-image-taken-on-a-cloudy-dawn-of-the-town-of-saint-malo-from-g1k27a.jpg" alt=""> </div> <div class="scrollable-content"> <h1>I am trying to do:</h1> <h3>1) make these gray div height 100% till bottom</h3> <h3>2) When content is more then this gray div should be scrollable or else not</h3> <p> 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. </p> </div> </div> <div class="right_content"> <img src="http://l7.alamy.com/zooms/19704c162b4446c984a50bfdb49b45ac/a-colour-image-taken-on-a-cloudy-dawn-of-the-town-of-saint-malo-from-g1k27a.jpg" alt=""> </div> </div> </div> <footer>this is footer</footer> </div> 

Answer 1

I'm not sure if this is the effect you want to get but try adding 'overflow' in that div CSS definition, for example:

.scrollable-content{
  background:#ddd;
  padding:10px;
  overflow: auto; max-height: 100%;
}

(I tried in the fiddle and it adds a scroll, is this the scroll you would like to get?)

Answer 2

How's this for you?

 body, html { margin: 0; padding: 0; height: 100%; width: 100%; } body { display: flex; max-height: 100%; } .wrapper { display: flex; flex-direction: column; flex-grow: 1; height: 100%; max-height: 100%; width: 100%; overflow: hidden; } header { background: grey } main { display: flex; flex-direction: row; flex: 1; background: blue } .column { width: 50%; padding: 10px; box-sizing: border-box; display: flex; flex: 1; flex-direction: column; } .column:first-child { background: yellow; } .column:last-child { background: green; } .image-holder { margin-bottom: 10px; background: orange; min-height:1%; } .image { width: 100%; display: block; height: auto; } .scrollable-content { flex: 1; background: grey; position: relative; height: 10px; } .firefox-scroller { position: absolute; top: 0; bottom: 0; width: 100%; overflow: auto; padding: 20px; box-sizing:border-box; } 

 <div class="wrapper"> <header>header</header> <main> <div class="column"> <div class="image-holder"> <img src="http://l7.alamy.com/zooms/19704c162b4446c984a50bfdb49b45ac/a-colour-image-taken-on-a-cloudy-dawn-of-the-town-of-saint-malo-from-g1k27a.jpg" alt="" class="image"> </div> <div class="scrollable-content"> <div class="firefox-scroller"> <h1>I am trying to do:</h1> <h3>1) make these gray div height 100% till bottom</h3> <h3>2) When content is more then this gray div should be scrollable or else not</h3> <p> 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. </p> </div> </div> </div> <div class="column"> <div class="image-holder"> <img src="http://l7.alamy.com/zooms/19704c162b4446c984a50bfdb49b45ac/a-colour-image-taken-on-a-cloudy-dawn-of-the-town-of-saint-malo-from-g1k27a.jpg" alt="" class="image"> </div> </div> </main> <footer>this is footer</footer> </div> 

Here is a fiddle for you to play with

Answer 3

You need to set max height of your scrollable container.

 max-height: 100%;

Then you gotta say you want the vertical overflow be scrollable:

overflow-y: scroll;

Answer 4

As far I am getting your thoughts, I think you are trying to get a fixed height for your div and if the contents are more, you want them to fit inside the div.

You can use a fixed height for your div and also can use the css overflow property to get the scroll-able content.

So I think your solution could be the following -

.scrollable-content{
    background:#ddd;
    padding:10px;
    height: (your desired height goes here);
    overflow:scroll;
}