高度:100%在Safari中运行时停止工作

Question

我遇到了一个问题，让div对齐到包装div的底部，所以我创建了一个代码示例来测试它。我把它设置为100%的高度。当我将测试代码复制到我的网站时，它停止工作了。然后我试着用了Chrome和Firefox。它工作得很好。它只在Safari中失败。知道是什么弄坏的吗?当它不起作用时，绿色的div会与它上面的div相对立。

我的目标是使绿色div与底部齐平，如测试中所示。其他任何方式都可以。在这个解决方案之前，我确实尝试了许多不同的事情。

.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex-col {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100%
}
.mf6 {flex: 0 0 50%;}
.theme-split-1 { background-color: #a7ef76; color: black }

<div class="flex-row">
<div class="mf6" style="border-bottom: 6px solid black">
<div class="flex-col" style="border-bottom: 6px solid blue">
<div class="mf6">
<p>Our students set the bar</p>
</div>
<div class="mf6 theme-split-1" style="align-self: stretch">
<p>Programs such as </p>
</div>
</div>
</div>
<div class="mf6">
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
</div>

Answer 1

对于第一部分对于你的问题，确保绿色div在你想要的地方对齐，答案是确保你的CSS在生产中按你认为的方式工作。

方法如下:

如果上下文内容覆盖了你的CSS，或者在你的CSS之后加载了另一个CSS源，你可以通过在浏览器中使用devtools检查元素来找出是什么破坏了它。

它将显示应用CSS的层次结构，您将能够看到和测试覆盖CSS示例的内容，并找到源代码。

检查在flex-row和flex-col之间插入的DIV(类MF6)，您可能需要将flex-col作为flex-row的直接后代。

同时，一些旁注也可能会有所帮助:

• 你有一些内联CSS，可能更好的服务与类，以及，这取决于你的确切情况
• 检查flex-end

第二期(不适用于Safari)，答案是确保您拥有所需的所有-webkit前缀:

• 你可能需要一个-webkit前缀在那里的某个地方，如果你得到的结果在其他地方，但不是在safari。

• 您过去需要display: -webkit-flex;来增强您的display: flex;，不确定是否仍然如此。