在 CSS 中，如何使具有“position:absolute”的元素左对齐但又包含在右？

Question

目标是使

absolute-position

元素左对齐（默认实现），但随后也取代对齐方式，使其不延伸到

.row

的右侧。

• 总结：我正在尝试实现缩放解决方案，以便随着页面的增长[它左对齐]和收缩[它右对齐]。

<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: static; 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: 0">
        Absolute
      </div>
    </div>
  </div>
</div>

Answer 1

我找到了解决方案！

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