如何让CSS中position:absolute元素左对齐且不超出.row容器右侧？

要让绝对定位元素默认保持左对齐，同时在容器缩小时自动右对齐以避免超出边界，通过以下CSS调整即可实现：

核心修改点 #

1. 将绝对元素的直接父容器#date_picker_listener设置为position: relative，确保元素以该容器为基准计算位置。
2. 利用max()函数结合calc()动态计算left值，实现自适应对齐逻辑。

修改后的完整代码：

<div style="display: flex; position: relative; padding: 10px; background: deepskyblue; max-width: 350px">
  .row
  <div style="width: 150px">
    .col
  </div>
  <div style="position: relative; padding: 10px; background: blueviolet; width: 150px">
    .col
    <label for="date">
      <b>
        Pick Date
      </b>
    </label>
    <div id="date_picker_listener" style="position: relative; width: 100%; background: green">
      #date_picker_listener
      <input id="date" type="text" placeholder="mm/dd/yyyy">
      <div style="position: absolute; width: 250px; height: 50px; background: red; left: max(0px, calc(100% - 250px))">
        Absolute
      </div>
    </div>
  </div>
</div>

原理说明 #

• position: relative：给父容器添加相对定位，修正绝对元素的位置计算基准，确保对齐逻辑基于父容器而非外层元素。
• left: max(0px, calc(100% - 250px))：
  • 当父容器宽度≥250px时，calc(100% - 250px)为负数，max()取0值，元素保持左对齐。
  • 当父容器宽度不足250px时，calc(100% - 250px)为正数，元素自动向右偏移对应数值，确保右边缘不超出父容器边界。

如果需要以最外层.row为边界（而非父容器），只需调整left的计算逻辑，扣除.row的左右padding：

left: max(0px, calc(100% - 250px - 20px)); /* 20px是.row的左右padding总和 */

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