お世話になっております。

heightを.containerに適用すべき理由が理解できません。

祖先要素での幅・高さの指定が必要だと考え、
.carouselにてheight: 220pxを指定したところ、
開発者ツールで353.69pxと表示されました。

この違いは何に起因しているのでしょうか。

.carousel {
  width: 80%;
  height: 220px;
  margin: 16px auto;
}

.container {
  width: 100%;
  overflow: hidden;
  position: relative;
}