I am working on a react application and I am trying to get a box to be scrollable with no luck. instead the box is expanding beyond the available space of parent.
I copied and edited the rendered html to make it easier to read
I am using bootstrap css
here is my code
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<link rel="icon" href="/icons/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000000">
<meta name="description" content="Web site created using create-react-app">
<link rel="apple-touch-icon" href="/icons/logo192.png">
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json">
<!--
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Nodex - Requester</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
<script defer="" src="/static/js/bundle.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.cursor-pointer {
cursor: pointer;
}
.user-select-none {
-webkit-user-select: none !important;
user-select: none !important;
}
.tree-node>.collapse {
position: relative;
}
.tree-node-icon {
margin-right: 0.5rem;
}
.tree-node .tree-node {
padding-left: 1.5rem;
}
.tree-node.active>div:first-child {
color: #ffc107 !important;
}
.tree-node>.collapse.show:before {
position: absolute;
display: block;
width: 1px;
height: 100%;
margin-left: 5px;
content: "";
background-color: gray;
}
.tree-node>div>.tree-node-ctrls {
display: none;
}
.tree-node>div:first-child:hover {
background-color: #444;
}
.tree-node>div:hover>.tree-node-ctrls {
display: block;
}
.tree-node-icon .badge {
width: 60px;
text-align: center;
}
.titlebar {
-webkit-user-select: none !important;
user-select: none !important;
-webkit-app-region: drag;
}
.nav {
--bs-nav-link-padding-x: 1rem;
--bs-nav-link-padding-y: 0.05rem;
}
.response-section.maximized {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background: rgba(var(--bs-dark-rgb));
}
.response-section.maximized .response-section-title {
margin-left: 100px;
}
.btn-small-height {
--bs-btn-padding-y: 0.1rem;
--bs-btn-padding-x: 0.4rem;
--bs-btn-font-size: 0.75rem;
}
.window-ctrls i {
width: 16px;
height: 16px;
font-size: 10px;
margin-right: -4px;
}
/* infotip container */
.infotip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* If you want dots under the hoverable text */
}
/* infotip text */
.infotip .infotiptext {
visibility: hidden;
background-color: var(--bs-primary) !important;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
/* Position the infotip text - see examples below! */
position: absolute;
z-index: 9999;
}
/* Show the infotip text when you mouse over the infotip container */
.infotip:hover .infotiptext {
visibility: visible;
}
.infotip .infotiptext.infotiptext-right {
top: -5px;
left: 105%;
}
.infotip .infotiptext.infotiptext-left {
top: -5px;
right: 105%;
width: 350px;
}
.infotip .infotiptext.infotiptext-top {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Use half of the width (120/2 = 60), to center the infotip */
}
.infotip .infotiptext.infotiptext-bottom {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px;
/* Use half of the width (120/2 = 60), to center the infotip */
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9jc3MvYXBwLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtDQUNDLGVBQWU7QUFDaEI7O0FBRUE7Q0FDQyxvQ0FBb0M7Q0FDcEMsNEJBQTRCO0FBQzdCOztBQUVBO0NBQ0Msa0JBQWtCO0FBQ25COztBQUVBO0NBQ0Msb0JBQW9CO0FBQ3JCOztBQUVBO0NBQ0Msb0JBQW9CO0FBQ3JCOztBQUVBO0NBQ0MseUJBQXlCO0FBQzFCOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLGNBQWM7Q0FDZCxVQUFVO0NBQ1YsWUFBWTtDQUNaLGdCQUFnQjtDQUNoQixXQUFXO0NBQ1gsc0JBQXNCO0FBQ3ZCOztBQUVBO0NBQ0MsYUFBYTtBQUNkOztBQUVBO0NBQ0Msc0JBQXNCO0FBQ3ZCOztBQUVBO0NBQ0MsY0FBYztBQUNmOztBQUVBO0NBQ0MsV0FBVztDQUNYLGtCQUFrQjtBQUNuQjs7QUFFQTtDQUNDLG9DQUFvQztDQUNwQyw0QkFBNEI7Q0FDNUIsd0JBQXdCO0FBQ3pCOztBQUVBO0NBQ0MsNkJBQTZCO0NBQzdCLGdDQUFnQztBQUNqQzs7QUFFQTtDQUNDLGtCQUFrQjtDQUNsQixTQUFTO0NBQ1QsVUFBVTtDQUNWLFFBQVE7Q0FDUixXQUFXO0NBQ1gsb0NBQW9DO0FBQ3JDOztBQUVBO0NBQ0Msa0JBQWtCO0FBQ25COztBQUVBO0NBQ0MsMEJBQTBCO0NBQzFCLDBCQUEwQjtDQUMxQiwyQkFBMkI7QUFDNUI7O0FBRUE7Q0FDQyxXQUFXO0NBQ1gsWUFBWTtDQUNaLGVBQWU7Q0FDZixrQkFBa0I7QUFDbkI7O0FBRUEsc0JBQXNCO0FBQ3RCO0NBQ0Msa0JBQWtCO0NBQ2xCLHFCQUFxQjtDQUNyQiwrQkFBK0IsRUFBRSw4Q0FBOEM7QUFDaEY7O0FBRUEsaUJBQWlCO0FBQ2pCO0NBQ0Msa0JBQWtCO0NBQ2xCLDhDQUE4QztDQUM5QyxXQUFXO0NBQ1gsa0JBQWtCO0NBQ2xCLGtCQUFrQjtDQUNsQixZQUFZOztDQUVaLG9EQUFvRDtDQUNwRCxrQkFBa0I7Q0FDbEIsYUFBYTtBQUNkOztBQUVBLG9FQUFvRTtBQUNwRTtDQUNDLG1CQUFtQjtBQUNwQjs7QUFFQTtDQUNDLFNBQVM7Q0FDVCxVQUFVO0FBQ1g7O0FBRUE7Q0FDQyxTQUFTO0NBQ1QsV0FBVztDQUNYLFlBQVk7QUFDYjs7QUFFQTtDQUNDLFlBQVk7Q0FDWixZQUFZO0NBQ1osU0FBUztDQUNULGtCQUFrQixFQUFFLDhEQUE4RDtBQUNuRjs7QUFFQTtDQUNDLFlBQVk7Q0FDWixTQUFTO0NBQ1QsU0FBUztDQUNULGtCQUFrQixFQUFFLDhEQUE4RDtBQUNuRiIsInNvdXJjZXNDb250ZW50IjpbIi5jdXJzb3ItcG9pbnRlciB7XG5cdGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLnVzZXItc2VsZWN0LW5vbmUge1xuXHQtd2Via2l0LXVzZXItc2VsZWN0OiBub25lICFpbXBvcnRhbnQ7XG5cdHVzZXItc2VsZWN0OiBub25lICFpbXBvcnRhbnQ7XG59XG5cbi50cmVlLW5vZGUgPiAuY29sbGFwc2Uge1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG59XG5cbi50cmVlLW5vZGUtaWNvbiB7XG5cdG1hcmdpbi1yaWdodDogMC41cmVtO1xufVxuXG4udHJlZS1ub2RlIC50cmVlLW5vZGUge1xuXHRwYWRkaW5nLWxlZnQ6IDEuNXJlbTtcbn1cblxuLnRyZWUtbm9kZS5hY3RpdmUgPiBkaXY6Zmlyc3QtY2hpbGQge1xuXHRjb2xvcjogI2ZmYzEwNyAhaW1wb3J0YW50O1xufVxuXG4udHJlZS1ub2RlID4gLmNvbGxhcHNlLnNob3c6YmVmb3JlIHtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRkaXNwbGF5OiBibG9jaztcblx0d2lkdGg6IDFweDtcblx0aGVpZ2h0OiAxMDAlO1xuXHRtYXJnaW4tbGVmdDogNXB4O1xuXHRjb250ZW50OiBcIlwiO1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiBncmF5O1xufVxuXG4udHJlZS1ub2RlID4gZGl2ID4gLnRyZWUtbm9kZS1jdHJscyB7XG5cdGRpc3BsYXk6IG5vbmU7XG59XG5cbi50cmVlLW5vZGUgPiBkaXY6Zmlyc3QtY2hpbGQ6aG92ZXIge1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiAjNDQ0O1xufVxuXG4udHJlZS1ub2RlID4gZGl2OmhvdmVyID4gLnRyZWUtbm9kZS1jdHJscyB7XG5cdGRpc3BsYXk6IGJsb2NrO1xufVxuXG4udHJlZS1ub2RlLWljb24gLmJhZGdlIHtcblx0d2lkdGg6IDYwcHg7XG5cdHRleHQtYWxpZ246IGNlbnRlcjtcbn1cblxuLnRpdGxlYmFyIHtcblx0LXdlYmtpdC11c2VyLXNlbGVjdDogbm9uZSAhaW1wb3J0YW50O1xuXHR1c2VyLXNlbGVjdDogbm9uZSAhaW1wb3J0YW50O1xuXHQtd2Via2l0LWFwcC1yZWdpb246IGRyYWc7XG59XG5cbi5uYXYge1xuXHQtLWJzLW5hdi1saW5rLXBhZGRpbmcteDogMXJlbTtcblx0LS1icy1uYXYtbGluay1wYWRkaW5nLXk6IDAuMDVyZW07XG59XG5cbi5yZXNwb25zZS1zZWN0aW9uLm1heGltaXplZCB7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0bGVmdDogMHB4O1xuXHRyaWdodDogMHB4O1xuXHR0b3A6IDBweDtcblx0Ym90dG9tOiAwcHg7XG5cdGJhY2tncm91bmQ6IHJnYmEodmFyKC0tYnMtZGFyay1yZ2IpKTtcbn1cblxuLnJlc3BvbnNlLXNlY3Rpb24ubWF4aW1pemVkIC5yZXNwb25zZS1zZWN0aW9uLXRpdGxlIHtcblx0bWFyZ2luLWxlZnQ6IDEwMHB4O1xufVxuXG4uYnRuLXNtYWxsLWhlaWdodCB7XG5cdC0tYnMtYnRuLXBhZGRpbmcteTogMC4xcmVtO1xuXHQtLWJzLWJ0bi1wYWRkaW5nLXg6IDAuNHJlbTtcblx0LS1icy1idG4tZm9udC1zaXplOiAwLjc1cmVtO1xufVxuXG4ud2luZG93LWN0cmxzIGkge1xuXHR3aWR0aDogMTZweDtcblx0aGVpZ2h0OiAxNnB4O1xuXHRmb250LXNpemU6IDEwcHg7XG5cdG1hcmdpbi1yaWdodDogLTRweDtcbn1cblxuLyogaW5mb3RpcCBjb250YWluZXIgKi9cbi5pbmZvdGlwIHtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5cdGJvcmRlci1ib3R0b206IDFweCBkb3R0ZWQgYmxhY2s7IC8qIElmIHlvdSB3YW50IGRvdHMgdW5kZXIgdGhlIGhvdmVyYWJsZSB0ZXh0ICovXG59XG5cbi8qIGluZm90aXAgdGV4dCAqL1xuLmluZm90aXAgLmluZm90aXB0ZXh0IHtcblx0dmlzaWJpbGl0eTogaGlkZGVuO1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1icy1wcmltYXJ5KSAhaW1wb3J0YW50O1xuXHRjb2xvcjogI2ZmZjtcblx0dGV4dC1hbGlnbjogY2VudGVyO1xuXHRib3JkZXItcmFkaXVzOiA2cHg7XG5cdHBhZGRpbmc6IDVweDtcblxuXHQvKiBQb3NpdGlvbiB0aGUgaW5mb3RpcCB0ZXh0IC0gc2VlIGV4YW1wbGVzIGJlbG93ISAqL1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHotaW5kZXg6IDk5OTk7XG59XG5cbi8qIFNob3cgdGhlIGluZm90aXAgdGV4dCB3aGVuIHlvdSBtb3VzZSBvdmVyIHRoZSBpbmZvdGlwIGNvbnRhaW5lciAqL1xuLmluZm90aXA6aG92ZXIgLmluZm90aXB0ZXh0IHtcblx0dmlzaWJpbGl0eTogdmlzaWJsZTtcbn1cblxuLmluZm90aXAgLmluZm90aXB0ZXh0LmluZm90aXB0ZXh0LXJpZ2h0IHtcblx0dG9wOiAtNXB4O1xuXHRsZWZ0OiAxMDUlO1xufVxuXG4uaW5mb3RpcCAuaW5mb3RpcHRleHQuaW5mb3RpcHRleHQtbGVmdCB7XG5cdHRvcDogLTVweDtcblx0cmlnaHQ6IDEwNSU7XG5cdHdpZHRoOiAzNTBweDtcbn1cblxuLmluZm90aXAgLmluZm90aXB0ZXh0LmluZm90aXB0ZXh0LXRvcCB7XG5cdHdpZHRoOiAxMjBweDtcblx0Ym90dG9tOiAxMDAlO1xuXHRsZWZ0OiA1MCU7XG5cdG1hcmdpbi1sZWZ0OiAtNjBweDsgLyogVXNlIGhhbGYgb2YgdGhlIHdpZHRoICgxMjAvMiA9IDYwKSwgdG8gY2VudGVyIHRoZSBpbmZvdGlwICovXG59XG5cbi5pbmZvdGlwIC5pbmZvdGlwdGV4dC5pbmZvdGlwdGV4dC1ib3R0b20ge1xuXHR3aWR0aDogMTIwcHg7XG5cdHRvcDogMTAwJTtcblx0bGVmdDogNTAlO1xuXHRtYXJnaW4tbGVmdDogLTYwcHg7IC8qIFVzZSBoYWxmIG9mIHRoZSB3aWR0aCAoMTIwLzIgPSA2MCksIHRvIGNlbnRlciB0aGUgaW5mb3RpcCAqL1xufVxuIl0sInNvdXJjZVJvb3QiOiIifQ== */
</style>
<style>
html,
body,
#root {
height: 100%;
}
body {
font-family: Roboto, Helvetica, Arial, sans-serif;
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9jc3MvaW5kZXguY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Q0FHQyxZQUFZO0FBQ2I7O0FBRUE7Q0FDQyxpREFBaUQ7QUFDbEQiLCJzb3VyY2VzQ29udGVudCI6WyJodG1sLFxuYm9keSxcbiNyb290IHtcblx0aGVpZ2h0OiAxMDAlO1xufVxuXG5ib2R5IHtcblx0Zm9udC1mYW1pbHk6IFJvYm90bywgSGVsdmV0aWNhLCBBcmlhbCwgc2Fucy1zZXJpZjtcbn1cbiJdLCJzb3VyY2VSb290IjoiIn0= */
</style>
</head>
<body class="h-100" style="">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" class="h-100">
<div class="d-flex flex-column bg-dark text-white h-100 container-fluid align-items-stretch">
<div class="row">
<div class="pe-0 col">
<div class="py-0 border-bottom border-secondary" data-bs-theme="dark">
<div class="row w-100 gx-1">
<div class="col-2">
</div>
<div class="col-6 titlebar"></div>
<div class="col-3">
</div>
<div class="col-1">
<div class="btn-group h-100 window-ctrls float-end" role="group"><button type="button"
class="h-100 cursor-pointer rounded-0 btn btn-outline-secondary">minimize</button><button
type="button"
class="h-100 cursor-pointer rounded-0 btn btn-outline-secondary">maximize</button><button
type="button"
class="h-100 cursor-pointer rounded-0 btn btn-outline-danger">close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-grow-1 row">
<div class="h-100 border-end border-secondary col-3">
<div class="d-flex h-100 flex-column">
<div class="d-flex justify-content-between align-items-center py-2">
<div>Collections</div>
<div><button type="button" class="btn btn-sm btn-info">New Collection</button></div>
</div>
<div class="py-3 overflow-scroll flex-grow-1 bg-danger">
<div class="tree-node">I need this box to be scrollable</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
<div class="tree-node">node title here</div>
</div>
</div>
</div>
<div class="h-100 d-flex flex-column col-9">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="bg-light p-5"><img class="img-fluid" src="" alt="image here">
</div>
</div>
</div>
</div>
</div>
</div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
I need to make the red box scrollable.
I am using flex and flex-grow-1 css classes
please advise.
tried to control the heights with h-100 but could not fix it
4
Answers
I am not sure why but I could fix it by setting a small height (1px) on the red box and as it has flex-grow-1 class it expands and takes the available space in parent
I added vh-100 to the html and body tags
and I added this css rule
here is the final code
can anyone please explain it?
Give
max-height:100vh;will do the trick;I have solved this issue by using custom style it may help you.
try adding a style attribute style="height:1px;" as to enable scrolling, you need to specify height with a fixed value.