html - 应用最小高度时，容器 div 内的 div 消失

Question

我有三个 100% 高度的 div，我想在它们周围添加一个高度是自动的容器，所以如果我添加另一个第四个 div，容器的高度会扩大。但是，当我将 height: auto 添加到容器 div 时，三个 div 消失了。我也尝试过 min-height: 100% ，但这没有用。我找不到适合我并帮助我了解情况的答案。提前致谢。

html,body {
    height: 100%;
    margin: 0;
}

html>body .content {
    height: auto;
}

.container {
    height: auto;
}

.content {
    height: 100%;
    min-height: 100%;
}

#one {
    background-color: pink;
}

#two {
    background-color: lightblue;
}

#three {
    background-color: lightgreen;
}

<div class="container">
    <div class='content' id='one'></div>
    <div class='content' id='two'></div>
    <div class='content' id='three'></div>
</div>

标签： htmlcss