Is there a way to adjust the height overflow using a percentage?

I have a coding dilemma here where I am attempting to make the SearchLocationCards overflow. It seems to work fine with 'px' and 'vh' values, but the '%' value doesn't seem to have any effect. How can I adjust the height of the scrollable box using % values?

<div className={{ maxHeight: '100%' }}>
  <SearchDrawer />
  <div style={{ overflow: 'auto', height: '85vh' }}>
    <SearchedLocationCards
      searchedLocations={props.searchedLocation.results}
    />
  </div>
  <Paginated
    align='center'
    justify='center'
    direction='column'
    totalPage={100}
  />
</div>
cssreactjsmaterial-ui

Answer №1

When you set the maxHeight of the div to '100%', it will grow to the same height as its child element. To resolve this, try setting the div's height to '100%' or another fixed value, and then you can use % for the child div's height.

If % doesn't work in a child component, it's likely because the parent isn't as large as you think.

You can attempt the following:

<div className={{ height: '100%' }}>
  // Child elements
</div>

or:

<div className={{ height: '100vh' }}>
  // Child elements
</div>

However, without knowing the height of the parent component, there's no guarantee this will work. The key is to trace up the tree to identify which element is restricting the size.

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

Unusual occurrences observed with table cell padding in CSS

When I include a TD padding in my CSS like this: #maincontent table td, #maincontent table th { padding: .333em 0 .333em .25em; } In Safari and IE, the padding is applied correctly to the TD, but not in Firefox. If I apply the TD padding only to th ...

csscross-browsercss-tables

Shifting red dots in precise positions as you zoom into an image

I am facing a challenge that I am struggling to resolve. I have an image that I am scaling using an input range, going from 100% width to 150% width. The issue arises when I have absolute positioned divs on this image that need to change position as I sca ...

reactjspositionstatezoomingscale

Obtaining the href content from a specific class using Selenium

I am attempting to extract information from a webpage that contains the following HTML: <div class="someclass"> <p class="name"><a href="#/word/1/">helloworld</a></p> </div> My objective is to retr ...

pythonhtmlcssxpathselenium

Preserving the position of inline text

I've been working on a button design that I want to make look more realistic by moving the text down 1px inside the button when it's pressed. To achieve this effect, I added an extra pixel to the top and removed one from the bottom. However, the ...

htmlcss

Customizing text field color in MaterialUI

I am attempting to change the border color from the default purple to white. Below is the progress I have made so far: const customStyles = makeStyles(theme => ({ darkModeCustomInput: { color: WHITE }, darkModeC ...

reactjsmaterial-ui

Tips for modifying the variant of a text input field in React admin

I'm trying to modify the variant of a TextInput element in material UI. The default variant is Standard, but I'd like to change it to outlined and haven't been able to figure out how to do so yet. I've consulted the documentation for Ma ...

reactjsmaterial-uireact-admin

After installing the necessary modules, NextJS still refuses to run on MacOS

Just recently, I set up a new project with NextJS using create-next-app and everything went smoothly as expected. After that, I performed npm i to ensure all the modules were installed into the node_modules directory. However, when I attempt to run npm ru ...

node.jsreactjsnpmnext.jsnode-modules

Using an id as the attribute value for a React ref

I have a question about referencing DOM nodes in a component. Currently, I am able to get the nodes and children using the following code: export class AutoScrollTarget extends React.Component { constructor(props) { super(props); this ...

javascriptreactjsjsx

What is the best way to create a sliding <nav> effect when a <div> is clicked?

Hello! I am looking for a solution that will cause the navigation contents to slide out from the left when the div class "bt-menu" is clicked. It should also slide back in to the left either when the div is clicked again or when anywhere outside of the nav ...

javascriptjqueryhtmlcss

What steps can be taken to stop images from overflowing a flex-grow-1 item?

https://i.sstatic.net/1Qgec.pngHello, I'm facing an issue with my image. I am dealing with 3 sections: Main Content Image and other components (main section) Button Currently, I need to ensure that the image height is set to a maximum of 100% of the ...

htmlcssbootstrap-4

Issue arises when the value of the Object disappears while using Select mui

I'm so close to fixing it, but every time I change the select option, the selected values disappear. How can I prevent this issue when using Objects in MUI select? Check out the Code Sandbokx example here: https://codesandbox.io/s/jovial-pascal-ngpgyh ...

node.jsmaterial-ui

Looking to create circular text using HTML, CSS, or JavaScript?

https://i.sstatic.net/pnu0R.png Is there a way to generate curved text in HTML5, CSS3, or JavaScript similar to the image linked above? I've experimented with transform: rotate(45deg); but that just rotates the text without curving it. Additionally, ...

javascriptcsstext

Update the Azure Variable group within the Azure Pipeline to include configurations for the .NET app settings and node JSON files

I have set up variable groups in the Azure library and linked them to an Azure pipeline. How can I initialize the xxx.json file? I also need to update the variables within the xxx.json file for both a React and .NET project. After adding variables to the ...

reactjsazureazure-devopsazure-pipelines

Unable to adjust the width of the react-select component

I've been struggling to adjust the width of the select element but no matter what I try, it remains at a default width of about 75px. const CustomContainer = styled('div')` width: 100%; height: 100%; display: flex; flex-flow: row wr ...

javascriptreactjsreact-select

"Utilizing AngularJS to set an element's position as fixed relative to a different

Imagine an app that can place input text fields on top of an image, creating a workspace. The challenge is to position these fields using specific coordinates (top, left, width, height) that are relative to the image itself (top/left = 0/0). How can one ac ...

cssangularjsangularjs-directive

Issue with non-responsive images in Bootstrap 3

Here is the bootstrap configuration that I am currently using: http://www.bootply.com/118172 I'm having an issue with the responsiveness of the image. It's not shrinking to match the height of the div on the left side. Can anyone help me trouble ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Adjusting the sensitivity of mousewheel and trackpad using JavaScript

I am currently utilizing CSS3 to smoothly move a div up and down based on the direction of scrolling. By monitoring the mouse wheel event, I can detect when a user scrolls down and trigger a CSS3 transition to slide the div up. However, I am encountering a ...

javascriptjqueryhtmlcss

Error encountered in Jest and Enzyme: Unable to access property 'htmlparser2' as it is undefined

Currently, I am utilizing jest and enzyme to create this test, however, I am encountering an error during the build process. Here is the sample test: import React from 'react'; import { shallow, render } from 'enzyme'; import Title f ...

reactjsjestjsenzymecheerio

What is the most efficient method for implementing uniform rounded corners in HTML/CSS across different web browsers?

Is there a simple way to achieve cross-browser compatibility without a lot of tedious work? I'm looking for a solution that works effortlessly on IE7+, FF2+, and Chrome, without resorting to using tables which may be outdated. Is there a middle ground ...

htmlcssrounded-corners

Switching hover behavior on dropdown menu for mobile and desktop devices

I have implemented a basic JavaScript function that dynamically changes HTML content based on the width of the browser window. When in mobile view, it removes the attribute data-hover, and when in desktop view, it adds the attribute back. The functionalit ...

javascriptjqueryhtmlcsstwitter-bootstrap