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

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％的孩子的宽度和高度将根据父母的宽度和高度进行调整。

Answer 2

请添加此CSS样式。

CSS

.parent{
  display:flex;
  display:-webkit-flex;
  align-items:center;
  -webkit-align-items:center;
}