如何在不使用position absolute时实现Flex布局中文本重叠覆盖

要实现窗口从右侧缩小右侧文本覆盖左侧、且右侧文本不越过左侧左外边距的效果，我们可以通过调整Flex布局的flex属性来实现，完全不需要绝对定位。核心思路是让左侧文本可收缩，右侧文本保持自身宽度不收缩，利用Flex的自动间距和空间分配特性实现重叠效果：

关键调整点： #

• 给左侧文本设置flex: 1 1 auto，让它可以占据剩余空间，同时在空间不足时可被收缩（但因为white-space: nowrap，文本不会换行，只会被右侧文本覆盖）
• 给右侧文本设置flex: 0 0 auto，强制它保持自身宽度，不随容器缩小而收缩
• 保留右侧文本的margin-left: auto来维持居右布局，同时margin-right:20px保持右侧间距

这样当窗口从右侧缩小时，右侧文本会向左移动覆盖左侧文本，直到它的左边缘碰到容器的左外边距（.container的margin-left:20px），此时容器宽度刚好容纳右侧文本+右侧间距，右侧文本就会停止移动，符合你的要求。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body {
      height: 100vh;
      width:100%;
      background-color: #D7CCC8;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }

    .container {
      min-width:100%;
      width:100%;
      margin-left:20px;
      height: 14px;
      max-height:14px;
    }

    .container--text {
      height: 14px;
      max-height:14px;
      width:100%;
      display: flex;
      flex-flow: row nowrap;
      padding: 10px 0;
    }

    .left {
      white-space: nowrap;
      color: #000000;
      font-size: 14px;
      font-weight: bold;
      flex: 1 1 auto; /* 允许占据空间并收缩 */
      overflow: visible; /* 默认值，允许右侧文本覆盖 */
    }

    .right {
      white-space: nowrap;
      margin-left:auto;
      margin-right:20px;
      background-color:#BCAAA4;
      color: #616161;
      font-size: 12px;
      flex: 0 0 auto; /* 固定宽度，不收缩不扩展 */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="container--text">
      <div class="left">Left Text</div>
      <div class="right">Right Text</div>
    </div>
  </div>
</body>
</html>

效果说明 #

• 窗口宽度足够时：左侧文本居左，右侧文本居右，互不重叠
• 窗口从右侧缩小时：右侧文本保持自身宽度向左移动，覆盖左侧文本，直到右侧文本的左边缘到达容器的左外边距（20px位置），之后不再向左移动

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