如何实现包含右浮动元素且内部动态内容垂直居中的Div布局

核心实现逻辑完全符合所有约束条件：

• 外层容器开启BFC，保证容器高度可以同时被浮动按钮和主内容撑开，不会出现高度塌陷
• 通过零宽度伪元素作为垂直对齐基准，实现主内容的垂直居中效果
• 完全保留浮动元素的原有特性，主内容会自动避开浮动区域，不会出现重叠，也能正常填充剩余水平空间
• 无需设置任何固定高度，容器高度由主内容和浮动元素中高度更高的一方决定，完全适配动态尺寸场景

实现代码 #

.card {
  /* 开启BFC，如需兼容旧版浏览器可替换为 overflow: auto */
  display: flow-root;
  border: 1px solid red;
  width: 300px;
  margin-bottom: 10px;
}

.card::before {
  /* 零宽度垂直对齐基准线 */
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0;
}

.buttons {
  float: right;
  background: green;
}

.content {
  display: inline-block;
  vertical-align: middle;
  /* 可自定义内边距调整和按钮的间距 */
  padding-right: 8px;
}

<!-- 场景1：浮动按钮更高，主内容较短 -->
<div class="card">
  <div class="buttons">
    Float<br>Float<br>Float
  </div>
  <div class="content">
    短内容，自动垂直居中
  </div>
</div>

<!-- 场景2：主内容更长，浮动按钮较矮 -->
<div class="card">
  <div class="buttons">
    Float Float
  </div>
  <div class="content">
    长内容测试，当内容较多时由内容决定容器高度，文字自动填充剩余水平空间，不会和按钮重叠，排版完全正常，符合float特性的要求
  </div>
</div>

<!-- 场景3：两者高度相近 -->
<div class="card">
  <div class="buttons">
    Float<br>Float
  </div>
  <div class="content">
    两行内容测试<br>第二行内容
  </div>
</div>

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