HTML&CSS问题：外层container容器无法包裹内部spinner元素

当然可以，问题出在这两点：

• .spinner用了position: absolute，脱离了文档流，导致.container无法计算它的高度，绿色容器因此高度塌陷成仅边框的高度
• 默认情况下绝对定位元素会相对于视口定位，而非父容器.container，所以它不在绿色框内部

方案一：用Flex布局实现（推荐，保持文档流，高度自动适配） #

这种方式不需要绝对定位，靠Flex布局让spinner靠右，同时让container自动适应spinner的高度：

.container {
  border: 1px solid green;
  display: flex;
  justify-content: flex-end; /* 让内部元素靠右 */
  padding-right: 30%; /* 模拟原代码中right:30%的偏移效果 */
}
.spinner {
  display: flex;
  border: 1px solid red;
  /* 移除position:absolute和right属性 */
}
.spinner::before {
  content: "Why this text is not inside green";
  font-size: 24px;
}

<div class="container">
  <div class="spinner">
  </div>
</div>
<div>
Why this text is not below another text?
</div>

方案二：保留绝对定位的同时让容器高度适配 #

如果一定要用position: absolute，需要给.container设置position: relative让spinner相对于它定位，同时通过手动设置最小高度匹配spinner高度：

.container {
  border: 1px solid green;
  position: relative; /* 让绝对定位的子元素相对自己定位 */
  min-height: 36px; /* 匹配spinner的高度：24px字体+边框、行高的额外空间 */
}
.spinner {
  display: flex;
  position: absolute;
  right: 30%;
  top: 0;
  border: 1px solid red;
}
.spinner::before {
  content: "Why this text is not inside green";
  font-size: 24px;
}

第一种方案更灵活，不需要手动计算高度，容器会自动根据spinner的内容调整高度，同时spinner也会在绿色容器内部靠右显示。

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