Flex布局右侧垂直居中元素，左侧展开时保持位置不变的CSS方案

我使用Flexbox创建了两列布局，左侧内容默认比右侧高，希望右侧内容垂直居中显示。但左侧存在可展开内容，当左侧内容展开时，我希望右侧内容保持当前位置，而非继续维持居中状态。目前已实现初始的垂直居中，但左侧内容展开时，右侧会随之下移以维持居中。由于左侧内容高度不固定，无法为右侧内容设置固定的上边距，寻求纯CSS解决方案。

解决方案思路 #

核心是让左侧的可展开部分脱离Flex容器的高度计算范围，这样左侧展开时不会改变容器的整体高度，右侧的居中位置就不会被影响。可以通过绝对定位实现这一点：

• 给左侧面板设置position: relative作为定位参考
• 将可展开的details元素设置为position: absolute，并指定top值让它在默认内容下方显示
• 给左侧面板添加足够的padding-bottom，避免展开内容覆盖下方元素

修改后的代码示例 #

CSS代码 #

.host {
  width: 500px;
  padding: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: yellow;
}

.left-panel {
  width: 50%;
  margin: 5px;
  display: flex;
  flex-direction: column;
  background: pink;
  position: relative;
  padding-bottom: 150px;
}

.summary {
  margin: 5px;
  background: green;
}

.expand-list {
  margin: 5px;
  background: skyblue;
  position: absolute;
  top: calc(100% - 5px);
  width: calc(100% - 10px);
}

.right-panel {
  width: 50%;
  margin: 5px;
  display: flex;
  flex-direction: row;
  background: blue;
  align-items: center;
}

.image {
  margin: 5px;
  background: red;
}

button {
  margin: auto 5px;
  width: 100px;
}

HTML代码 #

<div class="host">
  <div class="left-panel">
    <div class="summary">
      Here is a long paragraph of text that I need to display.
      It takes up most of the container, but there's an expander
      below that will make this text take up less because the
      expander will take up more when expanded.
    </div>
    <details class="expand-list">
      <summary>click me</summary>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
      </ul>
    </details>
  </div>
  <div class="right-panel">
    <div class="image">
      <p>
        Don't let this text fool you;
      </p>
      <p>
       it's actually an image.
      </p>
    </div>
    <button>
      Do it
    </button>
  </div>
</div>

补充说明 #

• padding-bottom的值可以根据展开内容的最大高度调整，避免内容溢出或留白过多
• 如果需要更动态的预留空间，也可以结合CSS的max-height和过渡效果，但纯CSS下绝对定位是最直接的方案

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