Scrollbar without a height in pixels

Question

Is this possible? I'm trying to make a responsive site and can get a scrollbar on my div without issue, but not without defining a height in pixels. I've been trying to modify my code, but so far I haven't had any luck. https://jsfiddle.net/9z1e2ov7/3/

.containerMain {max-width: 950px; margin: 0 auto; width:90%; 
                position: relative; overflow:hidden; 
                padding-bottom:2em; padding-top:2em;} 

.TextLeft {float:left; width:55%; margin:0 auto; text-align:left; position:relative;}

.ImageRight{float:right; width:45%; height:100%;} 
.ImageRight img{width:100%;}

.headline {width:100%; float:left;}
.headline img {width:85%;}

.lineGreen {width:85%; padding-top:2.1%; clear:both; border-bottom: 2px solid #A1A865;}

.BodyText { padding-right:12.5%; width:87.5%; height:350px; overflow-y:scroll;}

CSS

<div class="containerMain">

<div class="TextLeft">

<div class="headline">
    <img src="http://www.mad-motion.com/blog/wp-content/uploads/2011/07/Bildschirmfoto-2011-07-21-um-15.51.11-435x469.jpg"/>
</div>

<div class="lineGreen"></div>
<div class="BodyText">
<p>Nam egestas, justo ac finibus tincidunt, arcu lacus pharetra est, eget dignissim nunc est non metus. Donec gravida sapien nec finibus sagittis. Fusce turpis elit, interdum ac pellentesque vel, rutrum non augue. Duis lectus libero, interdum sit amet nulla sit amet, lacinia ullamcorper arcu. Mauris ut ante ac urna elementum lobortis vitae sed eros. Donec condimentum pulvinar ante, lacinia eleifend magna luctus ac.
</p>

<p>Quisque feugiat accumsan enim id consequat. Morbi lectus nulla, mollis non nisl et, tincidunt luctus lacus. Integer non rutrum sapien. Quisque pellentesque nulla lacus, eget dapibus ante euismod nec. Proin vitae rutrum quam, non bibendum augue. Donec blandit sapien vitae urna condimentum pellentesque. Fusce at sodales libero.
</p>
</div>
</div>

 <div class="ImageRight">
 <img src="http://www.mad-motion.com/blog/wp-content/uploads/2011/07/Bildschirmfoto-2011-07-21-um-15.51.11-435x469.jpg"/>
 </div>

</div>
<div class="clearfix"></div>

Answer 1

Essentially, no you can't. When dealing with vertical overflow, the element needs a way to know at what point to cut off content and begin the scrollbar. Otherwise, it will just stretch to fill the whole content.

However, you can always use max-height instead of height . This way if you have content that is shorter than your declared height, it will only take up as much space as needed.