Элемент HTML не занимает всю ширину с абсолютным позиционированием и внутри flexbox

Question

Этот серый блок (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

Из вопроса неясно, что именно вы ищете, но если я правильно понимаю, вы хотите, чтобы красные и серые рамки были на всю ширину.Вы можете сделать это, добавив flex: 1 к .rightside и width: 100%; к .absolute.Свойство flex указывает, что определенный элемент должен иметь приоритет.Это сокращение для flex-grow: 1.