DIV高度的问题没有调整大小

Question

我在div中有几个div的问题。

最终，我希望用户在输入框中输入地址，单击搜索按钮，然后触发AJAX请求（不包括在内）。完成AJAX请求后，我希望resultsDiv显示（通过fadeIn调用）。有两个div作为容器div，类inner和outer（这在容器内部提供了一些填充）。

.outer, .inner {
    display: block;
}

.inner {
    padding: 20px;
    clear: both;
}

.outer {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    padding: 0px;
    -webkit-box-shadow: 0px 10px 26px 1px rgba(125,125,125,0.67);
    -moz-box-shadow: 0px 10px 26px 1px rgba(125,125,125,0.67);
    box-shadow: 0px 10px 26px 1px rgba(125,125,125,0.67);
}

#subResultsDiv {
    border-radius: 10px;
    border: 1px solid #C3DBE9;
}

正如您所见on this jsFiddle，当显示resultsDiv时，div的底部会挂在外部div上：

有没有办法确保在调用fadeIn函数并显示resultsDiv时，外部和内部div都会随之扩展以停止“悬垂”？

如果上述内容不明确，请道歉 - 并提前感谢您的帮助

如果你有关于div如何工作的任何非常好的资源（例如浮动，阻止vs内联与其他一切） - 请告诉我。我真的很挣这个CSS领域。