如何水平放置div与父div的右边界重叠？

Question

我在矩形div中垂直对齐了一个圆。现在，我需要将该圆放置在父div的右边界上，同时还要保持响应能力。换句话说，如果该父div调整其宽度大小，则该圆应保持粘贴到右边界。

以下是我如何定位圆的示例：

这是到目前为止我掌握的JSFiddle。 https://jsfiddle.net/jqvf8t2L/

HTML

<div class="outer">
    <span>My Text</span>
    <div class="circle">
    </div>
</div>

CSS

.outer {
    display: flex;
    align-items: center;
    padding: 20px;
    position: relative;
    border: 1px solid black;
    width: 40%;
}

.circle {
    border: 1px solid blue;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    background-color: white;
}

span {
    display: flex;
    align-self: flex-start;
}

我尝试将align-self: flex-end放在circle元素上，并将circle元素绝对定位为无效。

任何帮助将不胜感激！

Answer 1

尝试一下

.outer {
  padding: 20px;
  position: relative;
  border: 1px solid black;
  width: 40%;
}

.circle-holder {
  position: absolute;
  display: flex;
  align-items: center;
  right: -10px; /** half your outer padding **/
  height: 100%;
  top: 0;
}

.circle {
  border: 1px solid blue;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  background-color: white;
}

<div class="outer">
  <span>My Text</span>
  <div class="circle-holder">
    <div class="circle">
    </div>
  </div>
</div>