How to dynamically adjust container height when flex items wrap in React with CSS?

I'm working on a React application where I have a container (answers-container) with multiple buttons (answer elements) inside it. These buttons are laid out using flexbox (display: flex) with flex-wrap: wrap to allow them to wrap onto the next line when the container width is exceeded.

The issue I'm facing is that the height of answers-container doesn't dynamically adjust based on the number of buttons or when buttons wrap to the next line. Instead, it remains fixed, causing unexpected behavior:

As you can see from the image, it almost overlaps the container below (which is not desired), I want to keep a persistent space between the answers container and the container with the buttons below.

I think that if I manage to make the height to adjust dynamically, I can set something like a margin-top to the buttons container and this way will keep persistent space. When I do it now, it the margin-top is according to the first line with the answers only, and this way, the next lines still overlaps the buttons container.

Here's a simplified version of my React component and 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>

What I've Tried:

Removing fixed height from .answers-container.
Ensuring flex-wrap: wrap is applied to .answers-container.
Ensuring justify-content: center is applied to .answers-container.
Checking for any fixed heights or other conflicting styles on parent elements.

Expected Behavior:

I expect the answers-container to dynamically adjust its height based on the number of buttons (answer elements) it contains and when they wrap onto the next line. This way, there shouldn't be any unnecessary white space or overflow when buttons wrap.

Current Behavior:

The height of answers-container remains fixed, causing buttons to overflow.

Question:

How can I ensure that the height of answers-container dynamically adjusts based on its content (buttons) in a React application using CSS? What changes should I make to my CSS or React component to achieve this behavior?

Solution

Most of the issues you run into are caused by explicitly setting the height properties. When not setting a height, the height will be determined by the children or content of the element. Not setting the height is what you need to have the .answers-container element scale properly.

Besides that, be careful with position: absolute. CSS uses by default a "document flow" which allows you to position elements relative to each other, accounting for padding, margins, etc. Positioning the elements absolute will remove the elements from said flow.

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

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  width: 786px;
  /* height: 244px; */
  min-height: 244px;
  position: absolute;
  top: 35%;
  left: 327px;
}

.question {
  width: 583px;
  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 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 10px;
  max-width: 985px;
}

.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: 9px auto;
}

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

.button-next {
  width: 189px;
  height: 48px;
  padding: 14px 40px 14px 40px;
  gap: 8px;
  border-radius: 8px;
  display: flex;
  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>