如何在Flexbox中按比例垂直对齐文本且避免内容溢出？

针对你的需求，这里提供两种可靠的实现方式，既能让.line内的span在垂直方向1/3高度位置对齐，又能保证内部满高内容不会溢出容器：

方法一：相对定位+绝对定位（精确控制位置） #

通过定位属性直接指定span的位置，同时添加溢出控制：

修改后的CSS代码 #

.container{
  height: 88px;
  display:flex;
  flex-direction: column;
}
 
.line{
  flex: 1;
  border: solid 1px;
  position: relative; /* 将.line设为绝对定位的基准容器 */
  overflow: hidden; /* 裁剪超出容器的内容，避免溢出 */
}

.line span {
  position: absolute;
  top: 33.33%; /* 将元素顶部定位到容器1/3高度处 */
  transform: translateY(-50%); /* 让元素自身垂直居中于该位置 */
}

测试用HTML（含满高内容） #

<div class="container">
  <div class="line">
    <span>This is line 1</span>
  </div>
  <div class="line">
    <span>This is line 2</span>
    <!-- 测试满高内容，不会溢出容器 -->
    <div style="height: 100%; background: lightblue;"></div>
  </div>
</div>

原理说明

• position: relative让.line成为绝对定位元素的参考容器
• top: 33.33%配合transform: translateY(-50%)，把span的垂直中心点精准定位到容器1/3高度位置
• overflow: hidden确保内部任何超出.line高度的内容都会被裁剪，不会破坏整体布局

方法二：Grid布局（无定位更符合现代布局逻辑） #

利用Grid的行比例划分，自然实现内容的位置控制：

修改后的CSS代码 #

.container{
  height: 88px;
  display:flex;
  flex-direction: column;
}
 
.line{
  flex: 1;
  border: solid 1px;
  display: grid;
  grid-template-rows: 1fr 2fr; /* 将容器高度按1:2划分，1fr对应1/3高度 */
  overflow: hidden; /* 防止内容溢出 */
}

.line span {
  align-self: end; /* 让span对齐到第一行的底部，正好是容器1/3高度位置 */
}

测试用HTML同方法一 #

<div class="container">
  <div class="line">
    <span>This is line 1</span>
  </div>
  <div class="line">
    <span>This is line 2</span>
    <div style="height: 100%; background: lightblue;"></div>
  </div>
</div>

原理说明

• grid-template-rows: 1fr 2fr把.line的高度分成上下两部分，上半部分占1/3，下半部分占2/3
• align-self: end让span贴紧上半部分的底部，刚好落在容器1/3高度的位置
• Grid布局会自动约束内部元素的高度，配合overflow: hidden彻底避免溢出问题

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