percentage size inside fit-content test

index.html

<div class="stage">
  <div class="container" id="a">
    <div class="element">px width both</div>
  </div>
  <div class="container" id="b">
    <div class="element">px width element<br>fit-content container</div>
  </div>
  <div class="container" id="c">
    <div class="element">percentage width element<br>px width container</div>
  </div>
   <div class="container" id="d">
    <div class="element">percentage width element<br>fit-content container</div>
  </div>
</div>

style.scss

.stage {
  border: 2px solid blue;
}
.container {
  margin: 2vh 20vw;
  height: 200px;
  width: 400px;
  border: 2px solid red;
}
.element {
  width: 200px;
  height: 100px;
  background: green;
}

#b {
  width: fit-content;
}

#c .element {
  width: 100%;
}

#d {
  width: fit-content;
}
#d .element {
  width: 100%;
}

untitled.markdown

Untitled

A Pen by Tom B on CodePen.

License.