css - Decrease div width on a bigger parent width -

i want div maximize size when viewport width smaller, , reduce size (up minimum) when viewport width larger.

how achieve that?

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

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

i tried modify padding instead of width, it's still same effect setting width % value.

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

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

you can along lines of width: calc(500px - 20vw). vw smallest (creating larger value) when window small, reverse occurring in large window.

RT