引导卡标头仅在Safari浏览器中重叠

Question

我们有一个问题，我们正在构建一个包含卡头的div，在它的下面，它包含一个div，该div是一个项目列表，现在在PC和其他电话上，它显示得很好：

但是，在野生动物园浏览器中，此卡头与列表重叠：

可以看到一点，但是几乎看不到。

我们不确定为什么会发生这种情况，并且由于我们无法同时检查iPhone或iPad上的元素（我们假设这是一个野生动物园问题），并且我们也没有Mac，因此我们不确定为什么这发生了。

这是此部分的html：

<div class="tab-pane active" id="form_cliente_datos_historias_tab" role="tabpanel" style="flex-flow: column; flex: 1 1 auto; overflow-y: auto;">
	<div class="list-group" style="padding-top: 0rem; margin-left: 0px; margin-right: 0px;" id="form_cliente_datos_historias_tab_a">                        
		<form method="POST" id="form_cliente_datos_historias" role="form" class="is-readonly">                        
		</form>                    

		<div class="btn-group card-header justify-content-between">
			<h5><span class="align-middle">Cuadros Clínicos</span></h5>
			<div class="navbar-form"><button class="btn btn-primary btn-sm" id="btn_nuevo_cuadro_tab">
				<i class="fa fa-plus" aria-hidden="true"></i></button>
			</div>
		</div>
		<div id="list_cuadros_tab">
		</div>
	</div>
	<!--An example of a generated list from our DB -->
	<div class="list-group" style="margin-left: 0px; margin-right: 0px;" id="form_cliente_datos_historias_tab_aa">
	<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" id="CC801" data-id="801">
	<div class="d-flex w-100 justify-content-between">
		<h5 class="mb-1">testtesttesttestasdasdasd</h5>
		<small class="text-muted">29/09/2019 18:23</small>
		</div>
		<p class="mb-1">123123123</p>
		<small>123123</small><br>
	</a><a href="#" class="list-group-item list-group-item-action flex-column align-items-start" id="CC799" data-id="799"><div class="d-flex w-100 justify-content-between">
		<h5 class="mb-1">asasdasdasd123123123</h5>
		<small class="text-muted">29/09/2019 18:13</small>
		</div>
		<p class="mb-1">asdasdasdasd</p>
		<small>asdasdasdasd</small><br>
	</a><a href="#" class="list-group-item list-group-item-action flex-column align-items-start" id="CC796" data-id="796"><div class="d-flex w-100 justify-content-between">
		<h5 class="mb-1">awdawdawd</h5>
		<small class="text-muted">29/09/2019 18:11</small>
		</div>
		<p class="mb-1">awdawdawd</p>
		<small>awdawd</small><br>
	</a><a href="#" class="list-group-item list-group-item-action flex-column align-items-start" id="CC797" data-id="797"><div class="d-flex w-100 justify-content-between">
		<h5 class="mb-1">awdawdawd</h5>
		<small class="text-muted">29/09/2019 18:11</small>
		</div>
		<p class="mb-1">awdawdawd</p>
		<small>awdawd</small><br>
	</a>
	</div>
</div>

提琴：https://jsfiddle.net/Seyren/Lwakg8xd/

希望我能为这个问题提供一切可能，如果还有其他事情可以提供，请告诉我

这真的很奇怪，我不确定如何解决，希望这里的人知道为什么会这样

谢谢！