Как выровнять элементы в <details>

Question

Я хочу, чтобы детали имели ширину 100% и выравнивали их элементы вправо.

Я пробовал:

details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

HTML:

<details>
  <summary>example</summary>

  <div>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</details>

Проблема в том, что элементы имеют ширину 100% и не выровнены вправо.

Answer 1

попробуйте использовать justify-content:space-between вместо align-item:flex-end

Answer 2

Вы можете использовать свойство text-align CSS вместо flex:

details {
   text-align: right;
}

Answer 3

Хочешь этого?

details {
  display: flex;
  flex-direction: column;
}
summary ~ div {
  text-align:right;
}}

<details>
  <summary>example</summary>

  <div>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</details>