我完全懂你的困扰——既要让红色元素牢牢钉在左上角，绿色元素保持居中，还要两者始终共享基线（底部对齐），不能给红色加position: absolute，之前调justify-content要么把红色拉去中间，要么绿色没法居中，确实有点棘手。

试试这个调整后的CSS方案，完美适配你的需求：

.container {
  display: flex;
  align-items: baseline; /* 维持两个元素的基线对齐 */
  position: fixed;
  left: 0;
  right: 0;
  top: 0; /* 确保容器固定在左上角区域 */
}

.red {
  max-width: 10%;
  /* 无需额外定位，flex容器默认会把元素放在起始位置（左上角） */
}

.green {
  margin: 0 auto; /* 核心技巧：利用flex自动边距让绿色元素水平居中 */
  display: inline-flex;
}

为什么这个方案有效？ #

• 容器用position: fixed占满整个水平宽度，top:0确保它固定在页面顶部区域；
• align-items: baseline保证红色和绿色元素始终对齐基线，不管红色元素高度怎么变化，绿色都会跟着对齐；
• 红色元素默认处于flex容器的起始端（左上角），不用任何额外定位属性；
• 绿色元素的margin: 0 auto是关键——flex布局中，自动边距会把剩余空间均匀分配在元素两侧，直接让它在容器里水平居中，同时不影响和红色元素的基线对齐。

这样就同时满足了你所有的要求：红色固定左上角、绿色居中、两者基线对齐，而且红色没用到position: absolute。

内容的提问来源于stack exchange，提问作者Ansis Spruģevics