superscript <sup> tag not working when display set to flex

user_11657947 0
Viewed 1073

I created this 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>

and set the display value for class content to flex, but the sup tag won't work anymore! How can I fix this problem for this tag to work?

flexbox superscript css html
1 Answers

You simply need to reset the alignment to baseline:

.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>

user_86203330
Related