指定高度后，Bootswatch列表会折叠

Question

在Firefox / Edge上，列表对象显示良好，但在Chrome / Opera中，列表对象似乎折叠了。我该如何解决？为什么会这样？

代码段：

<div class="bs-docs-section ">
    <div class="row">
        <div class="col-lg-6" style="height:270px" >
            <h4>Data</h4>
                <ul class="list-group card border-light" style="height:100%; overflow:hidden; overflow-y:scroll;">
                <li class="list-group-item d-flex justify-content-between align-items-center" style="height:auto">
                    Text Here
                    <span class="badge badge-primary badge-pill">123</span>
                </li> </ul> </div> </div> </div>

完整的html：https://jsfiddle.net/L39ckm5r/