Scrollbars cannot be added because the content adjusts to the height of the screen automatically

I am currently working on centering the boxes within my design, which I want to occupy 80% of the height of their parent component. One issue I am facing is that when I adjust the height of the browser window, the content inside the boxes also changes its height accordingly. While I understand this behavior is due to the 80% height setting, I'm not sure how to ensure that the content adjusts along with the parent height and adds scrollbars when necessary.

The dynamic nature of the content based on height changes is causing issues throughout the entire webpage layout. Should I consider using a fixed pixel height instead of relying on viewport height units?

For reference, here is an example of the code I am using with Chakra UI:

import { Box } from "@chakra-ui/react";
import React from "react";

const Practice = () => {
  return (
    <Box height={"100vh"} alignItems={"center"} display={"flex"} gap={"20px"}>
      <Box
        width={"200px"}
        height={"80%"}
        border={"2px"}
        borderColor={"black"}
        display={"flex"}
        justifyContent={"center"}
        alignItems={"center"}
      >
        box1
      </Box>
      <Box
        width={"200px"}
        height={"80%"}
        border={"2px"}
        borderColor={"black"}
        display={"flex"}
        justifyContent={"center"}
        alignItems={"center"}
      >
        box2
      </Box>
      <Box
        width={"200px"}
        height={"80%"}
        border={"2px"}
        borderColor={"black"}
        display={""flex""}
        justifyContent={""center""}
        alignItems={""center""}
      >
        box3
      </Box>
      <Box
        width={"200px"}
        height={"80%"}
        border={"2px"}
        borderColor={"black"}
        display={"flex"}
        justifyContent={"center"}
        alignItems={"center"}
      >
        box4
      </Box>
    </Box>
  );
};

export default Practice;

Answer №1

If you want to set a maximum height using CSS, you can utilize the css max function as shown below:

<Container
    width={"200px"}
    height={"max(80%, 800px)"}
    border={"2px"}
    borderColor={"black"}
    display={"flex"}
    justifyContent={"center"}
    alignItems={"center"}
    >
    Content goes here
</Container>

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

I have a question for you: How can I customize the font size in Material-UI TextField for different screen sizes?

I'm facing a challenge in Material-UI where I need to set different font sizes for TextField. While it may be simple in HTML/CSS, it's proving to be tricky in Material-UI. Can anyone help me figure out how to achieve this? The code snippet below ...

CSS sliding element moving horizontally

This code is currently set up to slide from right to left. #panel { position: absolute; right: 0; width: 180px; top: 0; bottom: 0; box-shadow: 0px 0px 15px black; background: white; padding: 10px; -webkit-transform-origin: 100% 50%; ...

Creating a seamless and interactive online platform

I am in the process of designing a website that has a sleek and dynamic layout, rather than just a static homepage. Let me explain further: Here is my current setup so you can understand what I am trying to achieve. By dynamic, I mean that when the page ...

Connecting to a specific mui-tab with react-router-dom

How can I link to a specific tab in my material ui-based tabs setup within a React application? I want to be able to navigate directly to a particular tab when landing on the page, but I'm struggling with integrating this functionality. Is there a way ...

The debounce function seems to be malfunctioning as I attempt to refine search results by typing in the input field

Currently, I am attempting to implement a filter for my search results using debounce lodash. Although the filtering functionality is working, the debounce feature seems to be malfunctioning. Whenever I input text into the search bar, an API call is trigge ...

A guide on dynamically showcasing/summoning icons in react by utilizing array data

QUESTION: 1 (SOLVED!) https://i.stack.imgur.com/1M1K7.png What is the best way to display icons based on an array of data codes? const data = [{ img: '01d' }, { img: '02d' }] if(data) { data.map((item) => ( <img src={`./ ...

Use next-i18next's Trans component to render a link as `[Object object]` instead of displaying the proper link

I encountered an issue with interpolation in the Trans component of next-i18next. Instead of displaying a proper link, I am seeing [Object object]. When I inspect the translation value in React Developers Tools, everything appears to be correct. Here is h ...

Determination of an arc trajectory using JavaScript

I have been trying to figure out how to replicate this effect. The Red arrowhead remains stationary while the background features a curved path. Currently, I am adjusting the background position to give the illusion of the arrowhead moving along the curved ...

Permitting various valid responses for questions in a multiple-choice test | Utilizing Angular.js and JSON

As a beginner in this realm, I must apologize if my query seems naive. I recently crafted a multiple-choice quiz using HTML, CSS, JavaScript (angular.js), and a JSON data file following a tutorial I stumbled upon. The outcome pleased me, but now I am face ...

React JS Mui Datepicker updates to the date that was selected prior

Expected Outcome: When the datepicker is initialized, it should have a null value. As the user selects a date, the value displayed should match the selected date. const [value, setValue] = useState(null) Instead of starting with a null value, setting it to ...

Blurry text can be a common occurrence when applying the transform(-50%,-50%) function to center

I have found a way to center a section using the following code: <div class="clock-section"> <h5 id="clock-title">We will be arriving soon</h5> <hr class="hr" id="cdhr"> </div> Here is ...

Divergent Appearance of Input Field in Chrome versus Firefox

After testing in Chrome and Firefox, I noticed that the input box appears larger than expected in Firefox. Below is the HTML markup: <div class="form-wrapper"> <input type="search" name="Ofsearch" placeholder="Search h ...

In Typescript, a computed property name within a type literal must be associated with an expression that has a type of literal or a 'unique symbol' type.ts(1170)

I'm facing an issue with dynamically generating grid columns using the react-data-table-component library. Here is a sample code snippet showing how to statically define the columns: const columns = [ { name: 'Title', selector: (row: ...

Displaying an image on a jsp page

In my current JSP, within the HTML section, I have the following: <select> <%if(size == 1)%> <option>None selected</option> <%if(size > 1)%> <option>1</option> </select> Additionally, I have this ima ...

Selenium encountered an error: Element not found - Could not locate element: {"method":"CSS selector","selector":"*[data-test="email-input"]}

Recently, my application has been encountering an error when trying to log in through a web form. The issue seems to be with locating the email input field: "no such element: Unable to locate element: {"method": "css selector", "s ...

Displaying and Concealing Elements with AngularJS and Implementing Alternating Styles

Within my collection of div elements showcasing product information, there is a need to display or hide specific fields based on the product type. While this functionality works smoothly, we now aim to enhance readability by implementing alternating row st ...

Reordering Divs in Bootstrap 3 Specifically for Small Screens

Just getting started with my first responsive design project, and I'm wondering if it's possible to achieve something like this using Bootstrap 3. The goal is to switch from the current layout: https://i.stack.imgur.com/lABXp.jpg To https://i. ...

After being redirected from another page using history() in React, the state is initially set to null but later gets updated to the correct value - Firebase integration

After logging in and being redirected to the profile page, I encounter an error that says 'Unhandled Rejection (TypeError): Cannot read property 'email' of null'. How can I ensure that the state is set before proceeding with any additio ...

What is the best way to create a compound query in Firebase?

I am working on a TypeScript script to search for a city based on its population... import { getFirebase } from "react-redux-firebase"; ... get fb() { return getFirebase(); } get fs() { return this.fb.firestore(); } getCollection(coll ...

There seems to be a discrepancy where the page content is not appearing within the

I'm currently working on a project where I need to fetch content from an API and display it on a webpage. The fetching process is working well, but I've encountered an issue when trying to view the page source code. It seems that the content retr ...