Ensure the parent div remains static while the child div is allowed to scroll

In the process of developing a react application, I have encountered an issue with an off-canvas bar. This off-canvas bar is outlined in green and positioned absolutely within the UI kit. Inside this bar, there are three divs - 'A', 'B', and 'C'. The heights of 'B' and 'C' divs are subject to change dynamically.

My objective is to prevent scrolling on both the off-canvas bar (green border div) and the 'C' div when content is added to 'B' and 'C'. The only scrollable area should be within the 'B' div. Unfortunately, setting fixed heights for 'B' and 'C' divs is not a viable option due to their variable heights. Even attempting to calculate 'C' div's height using JavaScript has proven unsuccessful.

Edit

Your code snippet:

.secondary-offcanvas .uk-offcanvas-bar {
    padding: 0;
    width: 480px;
    border: 1px solid var(--border-gray);
    position: absolute;
    box-sizing: border-box;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}

B div styling:

.shopping-cart-details {
    overflow-y: auto;
    flex-grow: 1;
}

Current Issue: While the parent div no longer scrolls as intended, the 'B' div remains unable to scroll properly. As a result, the excess content within the 'B' div gets cut off.

htmlcssreactjsuikit

Answer №1

This isn't a duplicate, which is great :)

For B, you can apply overflow: auto;

As for C, since its content can vary, what should happen if it's larger than the parent? Should it cut off and be invisible with overflow:hidden;, or should it remain visible?

overflow:visible ;

In any case, the parent should have overflow:hidden; to avoid scroll bars on the green border

If you want B and C to fill the space between them, Make the parent a flexbox by using display:flex;

Set its direction as column

flex-direction: column ;

Then use flex-grow:1; for the flex items (B, C)

This way, B and C will always stretch to fill their father's height and share the empty space equally. You can set different flex-grow values for different sizes

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

The functionality of Dnd-kit nested is functioning properly, however, one specific component is unfortunately

Currently, I am dealing with a two-dimensional array that results in two nested dnd-kit drag and drop fields. The nested dnd functions correctly; however, the first one sorts items when moved without any animations (even when moving my div). Below is the ...

javascriptreactjsnext.jsdrag-and-dropdnd-kit

Data in the array is only updated upon refreshing the webpage

Why is the array empty when I navigate to a new route (/category/name-of-category) that renders my Category component, but it gets data when I refresh the page? What am I missing here? To better explain, I have created a video. Video showcasing the issue: ...

javascriptreactjsreact-router

Is it possible to swap out context for hooks in this scenario?

Is there a new approach using the react hooks API to replace context data fetching? If you find yourself needing to fetch and utilize user profile data across multiple components, you can start by creating a context and exporting it: export const UserPro ...

reactjsreact-hooks

Sending a data to a property in React

In my project, there is a function component called ArticlePage with match as a prop. const ArticlePage = ({ match }) => { const name = match.params.name; const article = articleContent.find(article => article.name === name); if (!articl ...

reactjs

Update a div's content with a click

I'm looking for a way to update the data in my div whenever I click on a link that reveals the div. Despite finding many similar answers, none have worked for me. Here's what I have: I have multiple divs that become visible when clicking on lin ...

phpjqueryhtml

What is the most effective way to transform values into different values using TypeScript?

If I have a list of country codes and I want to display the corresponding country names in my component, how can I achieve this using props? interface MyComponentProps { countryCode: 'en' | 'de' | 'fr'; } const MyComponent: ...

javascriptreactjstypescript

Add a Font Awesome 5 icon to serve as the background of a Bootstrap 4 card

How can I utilize a Font Awesome 5 icon as the background image for a card using Bootstrap-4? After trying numerous solutions found online, I am still unable to get it to work. My environment consists of Angular2 (v8) in conjunction with Bootstrap 4. ...

csstwitter-bootstrapbootstrap-4font-awesomefont-awesome-5

I am having trouble running 'yarn install' on my project as it keeps giving me an error saying it cannot locate the binary 'react-script start

Here is my package.json This is the error I am encountering I'm facing issues with all my scripts as they keep throwing the same error consistently. I've tried cloning the repository in a new location and reinstalling the dependencies, but unfor ...

reactjsfirebasevisual-studio-codeyarn-lock.json

What are the TypeScript types needed for a React component that accepts an array of objects as a prop?

I am currently working on a React component that includes a prop named propWhichIsArray. This prop is expected to be an array of objects. Each object in the array will contain properties such as id (an ID) and text (a string). How do I properly define this ...

reactjstypescript

Generate several JSON objects and transmit them to a Spring controller using AJAX

<script> $(document).ready(function() { $("#frm_details").on("submit", function(event) { event.preventDefault(); var data = $(this).serialize() $.ajax({ url : "/saveUser", type : "post", ...

htmlajaxspring-mvcspring-bootspring-config

I am currently working on a project that involves utilizing React and Node.js. However, I have been encountering difficulties in passing data to the database due to my implementation of MySQL

index.js import './App.css'; import {useState} from 'react'; import Axios from 'axios' function App() { const [password,setPassword] = useState(""); const [title,setTitle] = useState(""); const addPassw ...

mysqlnode.jsreactjsexpress

Utilizing material-ui with Autocomplete featuring various value and option types

In my code, I am looking to store only an option's ID in a value For autocomplete functionality, the value's type and the option's type need to be the same My solution was to change the value in onChange, which worked successfully However ...

reactjstypescriptautocompletematerial-ui

`Evaluating a TypeScript React component using Mocha: A thorough examination of TSX components with TypeScript

Following the transition of my React project to TypeScript and Babel7, I encountered an issue with a component named abc.tsx (previously abc.js). While the component compiles successfully on npm start and loads in the browser without any issues, running th ...

reactjstypescriptwebpackmocha.jsbabeljs

"Problem with binding a dropdownlist to an object causing the selected object not to return

I have successfully bound an object to a dropdownlist using Knockout 2.2.1. The binding correctly displays the items in the list, but I am facing difficulties retrieving the selected OBJECT. To illustrate this issue, I have created a JSFiddle: http://jsfid ...

htmlselectdrop-down-menubindingknockout.js

What is the most effective method for implementing a debounce effect on a field in React or React Native?

Currently, I am working on implementing a debounce effect in my useEffect. The issue is that the function inside it gets called as soon as there is a change in the input value. useEffect(() => { if (inputValue.length > 0) { fn(); ...

javascriptreactjsreact-nativedebouncing

Resolve the issue with buttons located at the base of the Material-UI dialog

I need to adjust the positioning of the buttons at the bottom of my Material-UI dialog. The goal is for the buttons to always be fixed at the bottom of the dialog, regardless of its size or content. I have already attempted using properties like position: ...

reactjsmaterial-ui

PHP processing and converting to a string output

I have a PHP page (content.php) that includes plain HTML and content accessed via PHP variables <html> <head> </head> <body> <h1><?php echo $title; ?></h1> </body> </html> ...

phphtml

The regular expression used in npm start is incorrect

I followed the instructions to download React Wearable from this GitHub page After running npm install without any errors, when I tried npm start --reset cache, an error occurred stating: "Invalid regular expression: /(.\fixtures\.|node_mod ...

node.jsreactjsnpmnpm-start

Is there a way for me to update ansi-html from version 0.0.7 to 0.0.8?

I am currently working on a Maven application that utilizes ReactJS for the front-end. Recently, GitHub dependabot flagged a vulnerability in my project related to ansi-html:0.0.7, and advised me to upgrade to version @^0.0.8. Normally, when I need to upg ...

reactjsyarnpkgyarnpkg-v2yarn-lock.json

The option to clear searches is missing from the iOS interface

My application is designed to perform searches using post codes, and for the most part, it functions properly. However, I have encountered an issue where the clear icon on the right-hand side of the field does not display in certain browsers. To investiga ...

javascriptiosobjective-chtmlhtml-input