当应用最小高度时，容器div中的div消失

Question

我有三个高度为100％的div，我想在它们周围添加一个容器，该容器的高度是自动的，因此，如果再添​​加一个第四个div，则容器的高度会扩大。但是，当我向容器div添加height：auto时，三个div消失了。我还尝试了最小高度：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>