css - 在较大的父宽度上减小 div 宽度

Question

我希望 div 在视口(viewport)宽度较小时最大化尺寸，并在视口(viewport)宽度较大时减小尺寸(最大最小值)。

如何实现？

.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>

我尝试修改 padding 而不是 width，但它仍然与将 width 设置为 % 值的效果相同。

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

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

Answer 1

您可以按照 width: calc(500px - 20vw) 的方式进行操作。当窗口较小时，vw 将最小(创建较大的值)，而在大窗口中则相反。