Как динамически регулировать высоту контейнера при переносе гибких элементов в React с помощью CSS?

body, html, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  /* width: 100%; */
}


.container {
  width: 786px;
  /* height: 244px; */
  min-height: 244px;
  position: absolute;
  top: 35%;
  left: 327px;
  }

.question {
  width: 583px;
  height: 88px;
  left: 102px;
  position: relative;
  margin-bottom: 16px;
  font-family: Grange;
  font-size: 40px;
  font-weight: 500;
  line-height: 44px;
  text-align: center;
  min-height: 88px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  
}

.answers-container {
  width: 100%;
  height: 44px;
  top: 120px;
  gap: 10px;
  justify-content: center;
  /* width: fit-content; */
  display: flex;
  flex-wrap: wrap;
  max-width: 985px;
  margin-bottom: 50px;
  
}


.answer {
  border-radius: 8px;
  border: 1px solid #5bc1ed;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  font-size: 16px;
  background-color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  width: fit-content;
  min-width: 189px;
  text-align: left;
}

.answer:hover {
  background-color: #e0f7ff;
}

.answer-text {
  white-space: nowrap;
}

.answer-text {
  font-family: Proxima Nova;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  width: 129px;
  height: 16px;
  text-align: left;
  /* margin-left: 8px; */
  margin: 9px auto;
}

.next-back {
  width: 244px;
  height: 48px;
  top: 196px;
  left: 271px;
  gap: 20px;
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* margin-top: 20px; */
}

.button-next {
  width: 189px;
  height: 48px;
  padding: 14px 40px 14px 40px;
  gap: 8px;
  border-radius: 8px;
  display: flex;
  /* margin-left: 100%; */
  background: #c3edff;
}

.button-text {
  font-family: Proxima Nova;
  font-size: 16px;
  font-weight: 500;
  line-height: 19.49px;
  text-align: center;
  width: 98px;
  display: flex;
  height: 19px;
}

.arrow-icon {
  width: 20px;
  height: 20px;
}

.arrow {
  width: 14.14px;
  height: 14.14px;
  top: -0px;
  left: 10px;
  gap: 0px;
  opacity: 0px;
  /* angle: -45 deg; */

}

.back-link {
  width: 35px;
  height: 19px;
  gap: 8px;
  border-radius: 8px;

  font-family: Proxima Nova;
  font-size: 16px;
  font-weight: 500;
  line-height: 19.49px;
  text-align: center;
  color: #677487;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: underline;
}

<div class = "container"><div class = "question">What benefit do you look for in your hair products?</div><div class = "answers-container"><button class = "answer"><span class = "answer-text">a. Anti-breakage</span></button><button class = "answer"><span class = "answer-text">b. Hydration</span></button><button class = "answer"><span class = "answer-text">c. Soothing dry scalp</span></button><button class = "answer"><span class = "answer-text">d. Repairs appearance of damaged hair</span></button><button class = "answer"><span class = "answer-text">e. Volume</span></button><button class = "answer"><span class = "answer-text">f. Curl and coil enhancing</span></button></div><div class = "next-back"><a href = "/second" class = "back-link">Back</a><button class = "button-next"><a href = "/fourth"><span class = "button-text">Next question</span></a><svg aria-hidden = "true" focusable = "false" data-prefix = "fas" data-icon = "arrow-right" class = "svg-inline--fa fa-arrow-right arrow-icon" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 448 512"><path fill = "currentColor" d = "M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg></button></div></div>