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:

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 (
        <div className="container">
            <div className='question'>
                How often do you wash your hair?
            </div>
            <div className='answers-container'>
                <button onClick={() => handleAnswer('Daily')} className='answer'>
                    Daily
                </button>
                {/* Additional buttons follow */}
            </div>
            <div className='next-back'>
                <a href='/first' className='back-link'>Back</a>
                <button className='button-next'>
                    <Link to="/third">
                    <span className='button-text'>Next question</span>
                    </Link>
                    <FontAwesomeIcon className='arrow-icon' icon={faArrowRight} />
                </button>
            </div>
        </div>
    );
}

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

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?