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

[Anonymous]

Я работаю над приложением React, в котором у меня есть контейнер (контейнер ответов) с несколькими кнопками (элементами ответа) внутри него. Эти кнопки размещаются с использованием flexbox (display: flex) с flex-wrap: Wrap, чтобы они могли переноситься на следующую строку при превышении ширины контейнера.
Проблема, с которой я столкнулся. Облицовка заключается в том, что высота контейнера ответов не регулируется динамически в зависимости от количества кнопок или при переносе кнопок на следующую строку. Вместо этого он остается фиксированным, вызывая неожиданное поведение:

< /p>
Как вы можете видеть на изображении, оно почти перекрывает контейнер ниже (что нежелательно), я хочу сохранить постоянное пространство между контейнером ответов и контейнером с кнопками ниже.
Я думаю, что если мне удастся динамически регулировать высоту, я смогу установить что-то вроде поля-верха для контейнера кнопок и таким образом сохранить постоянное пространство. Когда я делаю это сейчас, верхний край соответствует первой строке только с ответами, и поэтому следующие строки по-прежнему перекрывают контейнер кнопок.
Вот упрощенная версия моего компонента React и CSS:

Код: Выделить всё

import { useState } from 'react';
import '../styles/Question.css';

export default function SecondQuestion() {
const [answer, setAnswer] = useState('');

const handleAnswer = (answer) => {
setAnswer(answer);
// Handle storing answer in localStorage or state as needed
};

return (


How often do you wash your hair?

 handleAnswer('Daily')} className='answer'>
Daily

{/* Additional buttons follow */}

[url=/first]Back[/url]

[*]
Next question





);
}

Код: Выделить всё

.answers-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
/* Other styles */
}

.answer {
border-radius: 8px;
border: 1px solid #5bc1ed;
padding: 10px 20px;
font-size: 16px;
background-color: white;
cursor: pointer;
transition: background-color 0.3s;
min-width: 189px;
/* Other styles */
}

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

Что я пробовал:

• Удаление фиксированной высоты из .answers-container.
• Обеспечение flex-wrap: к .answers-container применяется обертка.
• Обеспечение применения justify-content: center к .answers-container.
• Проверка фиксированной высоты или других конфликтующих стилей родительских элементов.

Ожидаемое поведение:
Я ожидаю, что контейнер ответов будет динамически регулировать свою высоту в зависимости от количества содержащихся в нем кнопок (элементов ответа) и от того, когда они переходят на следующую строку. Таким образом, при переносе кнопок не должно быть ненужных пробелов или переполнения.
Текущее поведение:
Высота контейнера ответов остается исправлено, вызывающее переполнение кнопок.
Вопрос:
Как я могу гарантировать, что высота контейнера ответов динамически регулируется в зависимости от его содержимого (кнопки ) в приложении React с использованием CSS? Какие изменения мне следует внести в компонент CSS или React, чтобы добиться такого поведения?

Подробнее здесь: https://stackoverflow.com/questions/786 ... ct-with-cs