HTML 元素在绝对定位和内部 flexbox 中未占用其全宽

Question

右侧的这个灰色 block ( https://jsfiddle.net/var6u4g7/ ) 没有占据其内容的整个宽度。它使用 righttext 的大小，如果您在 righttext 元素中添加更多单词，您会看到灰色框正好占据该宽度。我不想分配固定宽度，因为我不知道里面会有多少，所以我希望它与其内容一样宽。

如果您删除第一个元素上的 display: flex，则宽度有效，但其他内容会中断。 (如果你移除灰色框，你就会明白为什么我需要 display: flex。灰色框只是有时出现，当它不存在时，该行中的所有内容都应该垂直居中对齐。是有办法让这个工作吗？

.container {
  display: flex;
  align-items: center;
  background-color: yellow;
}

.leftside {
  margin-right: auto;
}

.rightside {
  position: relative;
}

.righttext {
  background-color: red;
  margin-top: 10px;
  margin-bottom: 10px;
}

.absolute {
  position: absolute;
  right: 0;
  top: 0;
  background-color: gray;
}

<div class="container">
  <div class="leftside">Lorem ipsum dolor sit amet.</div>
  <div class="rightside">
    <div class="righttext">
      Lorem ipsum.
    </div>
    <div class="absolute">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </div>
</div>

Answer 1

从问题中不清楚您到底在寻找什么，但如果我理解正确的话，您希望红色和灰色框是全 Angular 的。您可以通过将 flex: 1 添加到 .rightside 并将 width: 100%; 添加到 .absolute 来实现。 flex 属性表示某个元素应该优先。它是 flex-grow: 1 的简写。