html - 为什么最小/最大宽度/高度值不允许元素填充其父 div？

Question

HTML:

<div class="content">
    <div class="card">
    </div>
</div>

CSS:

.content {
    min-height: 350px;
    min-width: 320px;
    max-width: 350px;
    padding: 15px;
}

.card {
    width: 100%;
    height: 100%;
    background-color: black;
}

http://jsfiddle.net/aJhEF/1/

当使用控制台检查时，它显示 .content 具有有效的宽度和高度。那为什么设置了100%宽高的子元素没有填满父元素的宽高呢？

Answer 1

子元素不继承父元素的min-height属性

这就是 .card 元素高度为 0 的原因

就宽度而言，.card 会填充它的父级宽度。