如何让Flexbox自动容纳底部元素避免裁剪（Firefox 134.0.2）

在Firefox v134.0.2中，嵌套Ruby结构里，下方<rt>元素内的"yesterday"单词中字母y的底部会溢出到紧邻的下方元素空间，且不想通过硬编码固定像素的padding-bottom来解决这个问题，可通过以下两种方案处理：

方案1：恢复原生Ruby布局（推荐） #

问题根源在于你给最外层<ruby>添加了display: inline-flex及相关flex属性，破坏了Ruby元素原生的布局规则，导致浏览器无法正确计算字体下行部分（如字母y的底部）的空间。移除这些flex属性后，原生Ruby布局会自动适配字体度量，避免溢出：

修改后的HTML代码 #

<ruby style="font-size:180px; text-align:center;">
  <span>
    <ruby>昨<rp>(</rp><rt>キ</rt><rp>)</rp></ruby>
    <ruby>日<rp>(</rp><rt>ノウ</rt><rp>)</rp></ruby>
  </span>
  <rt>yesterday</rt>
</ruby>
<br>
<div style="width:50%;margin-left:15px;font-size:40px;background-color:rgb(0,255,0);">the bottoms of the "y" letters intrude into this element</div>

CSS代码保持不变即可。原生Ruby布局会自动根据字体的完整度量（包括下行高度）计算元素总高度，确保字母不会溢出到下方元素。

方案2：使用相对单位适配间距（保留flex布局时） #

如果必须保留inline-flex布局，可使用相对字体单位（如em或ex）替代固定像素值设置内边距，实现自适应的间距，避免硬编码尺寸：

修改后的HTML代码 #

<ruby style="font-size:180px;display:inline-flex;flex-direction:column;text-align:center;align-items:center;">
  <span>
    <ruby>昨<rp>(</rp><rt>キ</rt><rp>)</rp></ruby>
    <ruby>日<rp>(</rp><rt>ノウ</rt><rp>)</rp></ruby>
  </span>
  <rt style="padding-bottom: 0.15em;">yesterday</rt>
</ruby>
<br>
<div style="width:50%;margin-left:15px;font-size:40px;background-color:rgb(0,255,0);">the bottoms of the "y" letters intrude into this element</div>

这里的0.15em是基于当前字体大小的相对值，不同字体大小下会自动调整，比固定5px更灵活，也符合“非硬编码特定尺寸”的要求。

内容的提问来源于stack exchange，提问作者bp2017