Adjusting the height of a container dynamically in React while flex items wrap using CSS

In my React project, I have a container called "answers-container" with multiple buttons inside it, laid out using flexbox with flex-wrap: wrap to allow them to wrap onto the next line when the container width is exceeded.

However, I'm facing an issue where the height of the answers-container does not adjust dynamically based on the number of buttons or when they wrap to the next line. This fixed height causes unexpected behavior:

https://i.sstatic.net/DdZSTgB4.png

As shown in the image, the container almost overlaps the one below it, which is not the desired outcome. I want to maintain a consistent space between the answers container and the container with the buttons below it.

If I can get the height to adjust dynamically, I believe setting a margin-top on the buttons container will solve the issue and maintain a consistent space. Currently, the margin-top is set based on the first line of answers only, leading to overlapping of subsequent lines with the buttons container.

Below is a simplified version of the React component and CSS I am working with:

...
javascripthtmlcssreactjs

Answer №1

Many of the challenges you encounter stem from explicitly defining the height properties. By omitting a height value, the element's height will be determined by its children or content. Avoiding the explicit height setting is crucial for proper scaling of the .answers-container element.

Additionally, exercise caution with position: absolute. CSS typically follows a "document flow" that allows elements to be positioned relative to one another, accounting for padding, margins, etc. Using absolute positioning will disrupt this 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unlocking the Power of Angular: Transforming Input into Results

I'm currently exploring how to utilize an input field and fetch a response using Angular directly within the script. As a beginner, I came across this script on codepen. At the end of the code, I've attempted to make a call but haven't compl ...

javascriptangularjs

Using Angular's [ngIf], [ngIfElse], and [ngIfElseIf] functionalities enables dynamic content rendering

Currently, I have the following code snippet: <ng-container *ngIf="someCondition"> <ng-template [ngIf]="cd.typedType === 'first'" [ngIfElse]="Second"> <div class="row"> fir ...

htmlcssangulartypescriptng-template

AngularJS showing up as normal text

I can't seem to get angular JS working properly on my website. It keeps displaying as plain text in the browser and doesn't receive any information from the app2.js. I've double-checked all the dependencies and their locations in my code, so ...

javascriptangularjsparsingtext

Is it possible to transfer the reactivity of a Vue ref to another ref while reassigning it?

Below is a simplified version of my Vue component: <template> <div @click="loadEvents">{{ loading }}</div> </template> <script setup> import { ref } from 'vue' let loading = ref(false) loadEvents() func ...

javascriptvue.jsvuejs3vue-reactivity

After the decimal point, there are two digits

My input field is disabled, where the result should be displayed as a product of "Quantity" and "Price" columns ("Quantity" * "Price" = "Total"). However, I am facing an issue where the result often displays more than 2 digits (for example: 3 * 2.93), desp ...

javascriptjqueryhtml

A guide to troubleshooting the "Cannot resolve all parameters error" in Angular

Recently delved into the world of angular 2, and I've come across my first challenge. I'm trying to establish a service for retrieving data from a server but I keep encountering this particular error Error: Can't resolve all parameters fo ...

javascriptangular

unable to access POST information

I have encountered an issue with getting a basic AJAX POST to function properly. After facing difficulties with using a jQuery .click, I switched to an onclick method. I am unsure if I am making a glaring mistake or if there could be an issue with Apache s ...

javascriptphpjqueryajax

Is there a way to point the Facebook crawler bot to a different page?

I have a small website built with PreactJS that includes some parts from the main website (PHP). Since Facebook bot cannot crawl pre-rendered JavaScript content when shared, I want to redirect it to crawl the main PHP website instead when a link to the Pre ...

node.jsfacebookreactjsexpresspreact

Tips for starting the debugging process with POST and GET requests in Django and the Python Shell

I've encountered an issue with my code where the database is not updating and a new record is not being created. I suspect that there may be a problem with how I am handling the POST data retrieval in my script. Can anyone provide guidance on where to ...

htmldjangopostgresqlpostget

Creating dynamic stylesheets with the help of PHP and JavaScript

Generating tooltips based on a dynamically changing background image in CSS is my goal. Within my file named my_css.php, I have implemented the following code: <?php header('content-type: text/css'); $i = $_GET['index']; ...

phpjavascriptdynamic-css

Guide to sending a reference to a child input element using VueJs

I am currently attempting to pass a ref in order to retrieve the value of the input (base-input component) upon submission. The two components are listed below. Despite having a console.log statement in handleSubmit, the email variable always appears as un ...

javascriptvue.jsref

What is the best way to implement a sliding animation for a toggle button?

Currently, I am working on a toggle bar element that is functioning correctly in terms of styling the toggled button. However, I would like to add more animation to enhance the user experience. The concept is to have the active button slide to the newly s ...

cssvue.jssasscss-animations

Setting the chosen value within a nested ng-repeat loop

I'm struggling with correctly setting up the select boxes in a form that uses nested ng-repeats. The form has parent table rows generated with an ng-repeat, and each row contains a select box that is linked to an attribute in the parent row. The optio ...

javascripthtmlangularjsselectangularjs-ng-repeat

Combine multiple jQuery click functions into a single function

One issue I am facing on my website is that there are multiple modules, each of which can be disabled by the user. The problem lies in the fact that I have a separate script for each module. Hence, my query: How can I combine these scripts into one (perhap ...

javascriptjqueryhtml

What are some ways to prevent manual page reloading in Node.js when using EJS?

Currently, I am utilizing Node as a server and frontend in EJS. My project involves working with socket.io, which is why it is essential that the page does not refresh manually. If a user attempts to reload the current page, the socket connection will be d ...

javascriptjquerynode.js

Utilizing React Hooks and Firebase Firestore onSnapshot: A guide to implementing a firestore listener effectively in a React application

SITUATION Picture a scenario where you have a screen with a database listener established within a useEffect hook. The main goal of this listener is to update a counter on your screen based on changes in the database: (Utilizing the useEffect hook without ...

javascriptreactjsreact-nativegoogle-cloud-firestorereact-hooks

Enhancing list item appearance by replacing bullets with Font Awesome icons

I need to create a list similar to this example https://i.sstatic.net/w84xS.png Although I successfully replaced the bullet with a fontawesome icon, the result is not quite right as shown here https://i.sstatic.net/yqnbJ.png You may notice a difference ...

csshtmlfont-awesome

Issue with Updating React State Using Conditional Logic

Encountering a peculiar problem with React. Currently, the code below is functioning properly. It triggers the action creator fetchUserForm which then retrieves an object and stores it in the Redux state called userForm. This data is later accessed in the ...

reactjsredux

Which is more memory efficient: creating an object with functions defined on it using a function, or creating an instance of a class?

Imagine if I were to create a hypothetical class (this is purely for demonstration purposes) class X { constructor(word, number) { this.wordNumberString = word + number; } saySomething() { return `${this.wordNumberString} ${this.wordNumberStr ...

javascript

Exploring Twig variables in Node.js with the node-twig package

Despite following the documentation meticulously, and experimenting with various methods, I am still unable to achieve success. I have attempted using the code snippet below, trying to reference the variable in the main file like this: // None of the opti ...

javascriptnode.jstwig