コメントの数や改行などによって要素の縦幅横幅が変動する場合のheightとwidthの指定

前提・実現したいこと

チャットアプリの開発に伴い、ユーザーのコメントや改行の際に要素の高さや幅の変動があるのですが、その際の要素の縦幅と横幅の指定方法がわかりません。。
現状ではパーセントで縦横ともに全ての要素を合わせて100%になるように設定をしているのですがこれは不適切かなと思い、適切方法をご教授して頂きたく今回質問をしました。

※該当箇所は『/該当箇所↓↓/』とコメントアウト指定してありますので探しやすいかと思います。

該当のソースコード


/*画面上部の表示画面*/
.flash-box {
  height: 30px;
  width: 100vw;
  background-color: #38AEF0;
}

.notice {
  text-align: center;
  line-height: 30px;
  color: #FFFFFF;
}


.wrapper {
  height: 100vh;
  width: 100vw;
}



/*左側をしめるチャットサイド*/
.chat-side {
  height: 100vh;
  width: 300px;
  float: left;
}

.side-header {
/*該当箇所↓↓*/
  height: 12%;
  width: 100%;
  background-color: #253141;
  &__box {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    padding-left: 20px;
    padding-top: 45px;
  } 
}

.groups {
/*該当箇所↓↓*/
  height: 88%;
  width: 100%;
  background-color: #2f3e51;
}


/*チャットのメイン箇所*/
.chat-main {
  height: 100vh;
  width: auto;
}
.main-header {
/*該当箇所↓↓*/
  height: 12%;
  width: 100vw;
  &__left-box {
    &__current-group {
      color: #333333;
      font-size: 20px;
      padding-top: 35px;
    }
    &__member-list {
      color: #999999;
      font-size: 12px;
      padding-top: 15px;
    }
  }
}

.messages {
/*該当箇所↓↓*/
  height: 74%;
  width: 100vw;
  background-color: #fafafa;
}

.form {
/*該当箇所↓↓*/
  height: 14%;
  width: 100vw;
  background-color: #DDDDDD;
}