Veehmot Veehmot - 3 years ago 82
CSS Question

Decrease div width on a bigger parent width

I want a div to maximize size when viewport width is smaller, and reduce size (up to a minimum) when viewport width is larger.

How to achieve that?



.outer {
outline: 1px solid red;
height: 128px;
min-width: 50%;
/* width: ???; What to set here to achieve the effect? */
margin: auto;
}

<div class="outer">
</div>





I tried to modify padding instead of width, but it's still the same effect than setting the width to a % value.



.outer {
outline: 1px solid red;
height: 128px;
width: 100%;
padding: 0 10vw;
}

<div class="outer">
</div>




Answer Source

You can do something along the lines of width: calc(500px - 20vw). The vw will by smallest (creating the larger value) when the window is small, with the reverse occurring in a large window.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download