子高度%不会跟随父容器

Question

我不明白为什么在这段代码中，子容器的高度与父容器的高度不同。有什么想法吗？两个集装箱均为<div>

.parent {
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 1rem;
background-color: #f5f5f5;
min-height: 6rem;
margin-bottom: 0.8rem;
width: 100%;
overflow: hidden;
}
.child {
display: flex;
flex-direction: column;
width: 12rem;
justify-content: flex-start;
height: 100%;
}

Answer 1

您需要在父级中设置height，或者将min-height移动到子级。