非常简单的 flexbox 布局，带有溢出：隐藏——Firefox 中的垂直错位

Posted 2023-03-06

【中文标题】非常简单的 flexbox 布局，带有溢出：隐藏——Firefox 中的垂直错位

【英文标题】：Extremely simple flexbox layout, with overflow: hidden -- vertical mis-alignment in Firefox

【发布时间】：2015-09-16 22:44:07

【问题描述】：

我试图将两个弹性项目并排放置，基线对齐（很简单！），但有一些小限制：（1）overflow: hidden 两者都有； (2) 第二个弹性项目上的一些padding-top。这是 html：

<div class="outer">
  <div class="inner one">Hello</div>
  <div class="inner two">Hello</div>
</div>

...和 ​​CSS：

.outer  
  display: flex;
  align-items: baseline;

.inner 
  width: 30px;
  overflow: hidden;

.one 
  background: red;

.two 
  background: yellow;
  padding-top: 40px;

虽然 Chrome (v43) 的布局是正确的（或者至少是预期的那样），但 Firefox (v38) 完全打破了它：在 Firefox 中打开 this fiddle 你会看到。

有什么解决方法可以正确垂直对齐吗？太简单了，我不敢相信两个主流浏览器提供的结果都不一样。

【问题讨论】：

感谢this article 的已删除答案的发布者——那里可以找到一些好主意！

可能有用：philipwalton.github.io/solved-by-flexbox/demos/…

（编辑：对不起，我看错了测试用例；毕竟不是这个错误。）

可能的解决方法：将“ov​​erflow:hidden”放在每个 flex 项目内部的 wrapper-div 上，例如jsfiddle.net/xhrb0nmq/7

我为此提交了bugzilla.mozilla.org/show_bug.cgi?id=1179108，顺便说一句。

【参考方案1】：

解决方法很简单。

.outer  
  display: flex;
  align-items: flex-end;

注意使用 flex-end 作为 align 属性，而不是基线。据我所知，基线在 flexbox 中是一件复杂的事情。如果您想通过基线获得适当的结果，您可能应该用更多的排版来设计您的示例。

关于溢出问题以及它为什么会这样，我不太确定。我仍然希望你能像这样解决你的问题。

我建议您阅读这篇很棒的文章，即所谓的"Complete Guide to Flexbox"。

您好！