为什么这个对话框的内容表现得如此奇怪？

Question

以下是我所谈论的一个例子：https://jsfiddle.net/167bqchz/

对话框的边框不会向下延伸到内容，内容被“压扁”非常薄。如果你完全删除内容，边框就可以了，一切都按预期进行，但只要你把其他东西放在那里，它就会再次表现得很奇怪。

为什么会发生这种情况，我该怎么办呢？

编辑添加：我在Arch Linux上运行Firefox Aurora（开发人员版）。尚未使用任何其他浏览器或操作系统进行测试。

更新：在Arch Linux上的Chromium上测试过，我也有同样的错误。奇怪的是？在这种情况下，它在小提琴中工作正常，但在我的实际网站中根本没有，嗯......

截图：

HTML：

<div id="pool-dialog">
    <div class="dual-list list-right col-md-3">
        <h2><i class="fa fa-times"></i>&nbsp;Not Selected</h2>
        <div class="well">
            <ul class="list-group">
                <li class="list-group-item">Testaaaaaaaaaaa</li>
                <li class="list-group-item">Testaaaaaaaaaaaaaa</li>
                <li class="list-group-item">Testaaaaaaaaaaaa</li>
                <li class="list-group-item">Testaaaaaaaaaaaaa</li> 
                <li class="list-group-item">Testaaaaaaaaaa</li>
            </ul>
        </div>
    </div>
</div>

CSS：

.dual-list {
    padding-right: 5px;
    padding-left: 5px;
}

.list-group {
    margin-bottom: 0px;
}

.list-group-item {
    max-height: 30px;
    padding: 5px;
}

.well {
    padding: 10px;
}

.ui-dialog {
    border: 2px solid black;
    border-radius: 5px;
    background-color: white;
}

.ui-dialog-titlebar-close {
    float: right;
}

.ui-dialog-titlebar {
    border-bottom: 1px solid black;
}

Answer 1

我自己解决了这个问题。事实证明我不应该在.col-md-3上div。我从我需要.col-md-3的代码的另一部分复制了此代码，而忽略了将其删除。删除它已修复它。