html - 极其简单的 flexbox 布局，溢出 : hidden -- vertical mis-alignment in Firefox

Question

我试图并排放置两个 flex 元素，基线对齐(足够简单!)，但有一些小的限制:(1) overflow: hidden 在两者上； (2) 第二个 flex 元素上的一些 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) 完全破坏了它:打开 this fiddle在 Firefox 中你会看到。

有任何正确垂直对齐的变通方法吗？它是如此简单，我无法相信两种主要浏览器不会提供相同的结果。

Answer 1

解决方法非常简单。

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

注意将 flex-end 用于对齐属性，而不是基线。据我所知，基线在 flexbox 中是一件复杂的事情。如果你想通过基线获得正确的结果，你应该用更多的排版来想象你的例子。

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

我建议您阅读这本名为 "Complete Guide to Flexbox" 的好书.

您好!