css - 如何使子元素的宽度和高度小于其父元素的宽度和高度

Question

如何使子元素的宽度和高度小于其父元素的宽度和高度。这样它就可以成为包含在其动态父级中的正方形。像这样的东西:

.child{
    height: min(parent-height, parent-width);
    width: min(parent-height, parent-width);
 }

我什至尝试使用像这样的 css 变量

.parent{
   --parent-width: width; /* I also used min-content and max-content */
   --parent-height: height; /* also used min-content and max-content */
}

.parent .child{
   width: var(--parent-width);
   height: var(--parent-height);
}

<!-- The parent of .parent is dynamic -->
<div class="parent" style="width:100%; height:100%;">
   <div class="child" style="background:red"></div>
</div>

也没有说话

Answer 1

.parent
{
  background-color:green;
  width:300px;
}
.child
{
  min-height: 100%;
  min-width: 100%;
}

<div class="parent">
  <div class="child">Hello, I am Child</div>
 </div>

如果您设置了父项的宽度和高度，则 100% 的子项宽度和高度将根据父项的宽度和高度进行调整。