100% vs 100vw

by Henry

HTML

<div class="outer">
  <div class="inner vw100">🙀</div>
</div>

<div class="outer">
  <div class="inner p100">😌</div>
</div>

SCSS

div {
  height: 200px;
  border: 1px solid red;
  width: 100px;
}

.outer {
  margin-bottom: 20px;
}

.inner {
  border-color: blue;
  height: 50px;
  text-align: center;
}

.vw100 {
  width: 100vw;
}

.p100 {
  border-color: green;
  width: 100%;
}