верхний индекс <sup>тег не работает, когда дисплей настроен на сгибание

Question

Я создал этот div:

.content {
  display: flex;
}

<div class="content">
  <div>MC</div>
  <div>MR</div>
  <div>M+</div>
  <div>M-</div>
  <div>MS</div>
  <div class="sup">M<sup>-</sup></div>
</div>

и установите значение отображения для содержимого класса гибким, но тег sup больше не будет работать! Как я могу исправить эту проблему, чтобы этот тег работал?

Answer 1

Вам просто нужно сбросить выравнивание до базовой линии:

.content {
  display: flex;
  align-items:baseline;
}

<div class="content">
  <div>MC</div>
  <div>MR</div>
  <div>M+</div>
  <div>M-</div>
  <div>MS</div>
  <div class="sup">M<sup>-</sup></div>
</div>