html - 子 div 的大小不应增加，而只能相对于父 div 减小大小

Question

如何设计一个子 div，其初始大小不应随着父 div 的扩展而增加，而应仅在父 div 的大小减小时缩小。而且 div 应该始终是正方形。

我正在尝试使用最小宽度和最小高度，但它不起作用。

#parentDiv{
      position:relative;
      border:solid pink;
 }

#childDiv{
      position:absolute;
      right:10px;
      bottom:10px;
      width:250px;
      height:250px;
      min-width:2%;
      min-height:2%;
      border:solid blue;
}

Answer 1

您想要以 % 为单位设置宽度和高度，以便它们与父级的尺寸成比例，并将最大高度和最大宽度设置为您希望的最大尺寸。

所以:

width: 20%;
height: 20%; //will make sure div is always 20% of parent's height 
max-width: 250px;
max-height: 250px; //will never go bigger than 250px