How fit-content works #

It works like this. I uses max-width algoritham as long as max-width can fit inside container, when it can's it'll wrap.
I recently started to think about it as fit-content(auto), auto stands for width: auto.

What is value of em? #

When em is used for font-size: 1em, 1em resolves to parent font value. When is used for anything else, it resolves to it's
own computed font-size.

<style>
.parent {
  font-size: 20px;
}

.child {
  font-size: 2em; /* 20px * 2 = 40px*/
  margin-inline: 1em /* 40px */;
}

.child2 {
  margin-inline: 1em; /* 20px */
}
</style>
<div class="parent">
  Parent 20px
  <div class="child">
    Child 40px
  </div>
  <div class="child2">
    Child2 20px
  </div>
</div>

Depends on which property uses 1em, em will resolve differently. Essencially, I try to think about it as if
font-size boosts em. The rest of props just uses it. If there is no boost, they use parent's font-size value.

How auto works as track sizing #