Question

I have the following HTML structure:

<div class="outer">
<div class="inner">
<a href="#"/>
<a href="#"/>
<a href="#"/>
</div>
</div>

And CSS:

div.outer{
    position:relative;
    height:177px;
    width: 495px;
    margin: 0 10px 0 10px;
    overflow: hidden;
} 
div.inner{
    position: absolute; 

}

How is it possible to resize the outer div dinamically ? Height min-max does not work. Thank you !

Answer 1

For this to work the way I think you want it to work, then you’d need to use all three declarations: min-height, height and max-height, with the height being a relative measure, and the min-height and max-height both used to constrain that relative sizing to an appropriate minimum or maximum. For example:

.outer {
    overflow: auto;
    margin: 0 auto;
    width: 50%;
    border: 2px solid #000; /* The above just for aesthetics, adjust to change */
    min-height: 100px;
    height: 50%;
    max-height: 1000px;
}

JS Fiddle demo

In the demo, resize the window to cause the ‘preview’ pane to expand/contract to see the effects.