React中Flex元素换行时如何动态调整容器高度？

我正在开发一个React应用，其中有一个answers-container容器，内部包含多个answer按钮。这些按钮通过Flexbox布局（display: flex）并设置flex-wrap: wrap，以便在容器宽度不足时换行显示。

问题是answers-container的高度无法根据按钮数量或换行情况动态调整，始终保持固定，导致按钮溢出后与下方的next-back容器重叠，无法维持两者之间的固定间距。

现有代码 #

CSS 样式 #

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

.container {
  width: 786px;
  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;
  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;
  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;
  position: absolute;
  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;
}

.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;
}

React 组件渲染结构 #

<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>

已尝试的方法 #

• 移除answers-container的固定height
• 确保answers-container应用了flex-wrap: wrap
• 确保answers-container应用了justify-content: center
• 检查父元素是否存在固定高度或其他冲突样式

解决方案 #

1. 修复answers-container的高度限制 #

移除固定高度和多余的定位属性，让容器自动适配内容高度：

.answers-container {
  width: 100%;
  /* 移除固定height */
  /* height: 44px; */
  /* 移除top定位 */
  /* top: 120px; */
  gap: 10px;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  max-width: 985px;
  margin-bottom: 50px;
  /* 可选：添加内边距避免内容贴边 */
  padding: 0 10px;
}

2. 调整next-back的定位方式 #

将绝对定位改为文档流布局，让它自动跟随在answers-container下方：

.next-back {
  width: 244px;
  height: 48px;
  /* 移除绝对定位属性 */
  /* top: 196px; */
  /* left: 271px; */
  gap: 20px;
  /* 水平居中容器 */
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

3. 优化父容器container的居中方式 #

用transform实现更灵活的居中，避免固定位置导致的布局偏移：

.container {
  width: 786px;
  min-height: 244px;
  position: absolute;
  top: 50%;
  left: 50%;
  /* 水平垂直居中 */
  transform: translate(-50%, -50%);
  /* 盒模型包含内边距，避免内容溢出 */
  box-sizing: border-box;
  padding: 20px;
}

效果说明 #

• 移除answers-container的固定高度后，Flex容器会根据内部按钮的行数自动计算高度，实现动态适配。
• next-back改为文档流布局后，会自动响应answers-container的高度变化，两者之间的margin-bottom: 50px能稳定维持间距。
• 父容器的transform居中方式不会因为内容高度变化导致整体布局偏移，适配性更强。

内容的提问来源于stack exchange，提问作者user25658615