having hard time showing scroll bar in a nested div with no fixed width or height

Question

I have a div which is inside another div and none of the elements have fixed width or height. The center div (class:page-detail-left-content) should be flexible as the window size changes, but needs to have a min width and show a scroll bar when appropriate.

Any suggestions?

 .page-detail { height: 100%; } .page-detail-with-filter { margin-left: 240px; } .page-detail-right { float: right; width: 240px; height: 100%; z-index: 999; background: green; } .page-detail-left { height: 100%; margin-right: 240px; background: lightblue; } .page-detail-left-main-content { bottom: 90px; position: absolute; top: 190px; overflow: scroll; right: 240px; min-width: 800px; left: 10px; } .page-detail-bottom { width: 100%; height: 90px; border-top: 1px solid lightgray; right: 240px; bottom: 0px; position: absolute; z-index: -10; } .filterSelection { height: 100%; } 

 <div class='filterSelection'> <div class='page-detail-right'> RIGHT </div> <div class='page-detail-left'> <div style="height:100%;"> <div style="height:80px;"> header </div> <div style="border-top:1px solid; border-bottom:1px solid;height:50px;" class="gray2"> header2 </div> <div class="page-detail-left-main-content"> dskhfjkajf ajsdhfjk asdfhah sdfha sdfhaskdhf kjahsdjkfh ajsdhf asdkjfhakjsdh fkjh askdj fhjaksdhfj ahsdjfkh asjkfhdajskh fdjkhsdf sdfjkasdfh ajkdhfjka hdjkhafkjsh kjfhashdkfj hsjdhf hdsfak jhdfa shdfajkhsdf adhf akdsjhfkajhd sfkjahsdkjf haksjdhfasdf adf dsfjadjkfhak sdhfkjashdfjk adhfa hdfh </div> <div class="page-detail-bottom"> bottom bar </div> </div> </div> </div> 

Answer 1

Can you try replacing your CSS with this? It uses @media queries, which define conditional rules in CSS. In this case, .page-detail-left-main-content will be given overflow: scroll when the window's width is less than 1000px.

 .page-detail { height: 100%; } .page-detail-with-filter { margin-left: 240px; } .page-detail-right { float: right; width: 240px; height: 100%; z-index: 999; background: green; } .page-detail-left { height: 100%; margin-right: 240px; background: lightblue; } .page-detail-left-main-content { bottom: 90px; position: absolute; top: 190px; right: 240px; min-width: 800px; left: 10px; } @media (max-width: 1000px) { .page-detail-left-main-content { overflow: scroll; } } 

 <div class='filterSelection'> <div class='page-detail-right'> RIGHT </div> <div class='page-detail-left'> <div style="height:100%;"> <div style="height:80px;"> header </div> <div style="border-top:1px solid; border-bottom:1px solid;height:50px;" class="gray2"> header2 </div> <div class="page-detail-left-main-content"> dskhfjkajf ajsdhfjk asdfhah sdfha sdfhaskdhf kjahsdjkfh ajsdhf asdkjfhakjsdh fkjh askdj fhjaksdhfj ahsdjfkh asjkfhdajskh fdjkhsdf sdfjkasdfh ajkdhfjka hdjkhafkjsh kjfhashdkfj hsjdhf hdsfak jhdfa shdfajkhsdf adhf akdsjhfkajhd sfkjahsdkjf haksjdhfasdf adf dsfjadjkfhak sdhfkjashdfjk adhfa hdfh </div> <div class="page-detail-bottom"> bottom bar </div> </div> </div> </div> 

I'm a bit unclear on when you'll need scrollbars. Without a set height, a div will always expand vertically to fit it's content, regardless of width.