To help explain the issue I'm facing, I created a demonstration on CodePen: https://codepen.io/ganakim/pen/jOKmByM
Despite setting overflow-y: auto for column 1, it is not scrolling as expected. Instead, it is causing the footer to extend beyond the maximum height of the card. How can this problem be resolved?
To address @Dakshank's recommendation, include overflow: hidden in the parent element (specifically the card-body).
If you're utilizing Bootstrap, it is advisable to leverage Bootstrap classes to accomplish your objective. Why create custom CSS when Bootstrap offers the same result with its classes?
Refer to the code snippet provided below.
.wrapper {
height: 200px;
background-color: cornflowerblue
}
.card {
max-height: 80%;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096b66667d7a7d7b6879493c273bq2s">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7basdfbergrfb438tWxZDiXNR3NSOPRUGB6260U5gu6NMLJ8oMsGu86iculisfbe128vPmt/9dMb653" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="492b2626j7fdeeeb3a36303e31320d393762b40fcfd3c2ebeebdc39dbded85ceefbfbbbe3ffddf8fbcenrd42ccffb202dfdfeebbbdccbddba69659fafcbddafcd495adfededae41cbfdedea86797700104178708aa57697fa7cfedd46afe167c9a9ab2">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIEmbSgFdmADbwvdiknfu1rB0741LSMIYPlM26G4z+zLl271OoutoegyODn06816BWVrzoixmv748rfMP»KRkMCo" crossorigin="anonymous"></script>
<div class="wrapper">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body d-flex overflow-hidden">
<div class="w-30 overflow-auto">
Col 1
<br> More Col 1
<br> More Col 1
<br> More Col 1
<br> More Col 1
</div>
<div class="w-30">
Col 2
</div>
<div class="w-30">
Col 3
</div>
</div>
<div class="card-footer">
Footer
</div>
</div>
</div>I understand the frustration of facing this issue, but I was able to find a solution early on when working with flex.
To resolve this problem, simply include either overflow: hidden or min-height: 0 in the parent element where the scrolling occurs. This method consistently works, especially when you need to set dynamic scroll height for the child element.
I believe this advice will be beneficial to you.
.wrapper{
height: 200px;
background-color: cornflowerblue
}
.card{
max-height: 80%;
}
.scroll-y{
max-height: 100%;
overflow-y: auto;
}
.card-body{
overflow: hidden;
/* Alternatively, you can use */
/* min-height: 0; */
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body d-flex">
<div class="w-30 scroll-y">
Col 1
<br>
More Col 1
<br>
More Col 1
<br>
More Col 1
<br>
More Col 1
</div>
<div class="w-30">
Col 2
</div>
<div class="w-30">
Col 3
</div>
</div>
<div class="card-footer">
Footer
</div>
</div>
</div>Issue Description: I encountered an issue while working with typescript and emotion/styled libraries. When attempting to specify the type of the parent component that wraps a styled component, I faced difficulties. The scenario involves a parent componen ...
Whenever I click on an item from my list displayed using ngrepeat, it generates another list specific to the selected element. My goal is to change the background color of the clicked element to indicate it has been selected. However, the problem arises wh ...
I'm currently working on creating a simple game involving sliding ice-blocks. I ran into an issue while testing this JSFiddle and I'm looking to "hide" the image/button triggered by the line alert('Game starts!');. I attempted using sta ...
Is there a way to prevent elements in a <div> from moving when an adjacent element is resized, without using position:absolute? Any help would be greatly appreciated. Thank you in advance! ...
Currently, I am working on creating standalone error pages (404/503) as individual HTML files. My server-side setup involves Node.js, but these specific files will be hosted directly in Nginx. One of the challenges I am facing is automatically including a ...
I encountered an issue with a treemap visualization. I came across an example that is similar to my situation, which can be viewed here: In the demo, you can see that the size of each square in the treemap is determined by the content size. However, all s ...
After creating a simplified version of an HTML, CSS, jQuery navigation menu, I noticed that the submenu items were being considered part of the containing list item. This caused them to not function as intended when clicked because they were being treated ...
Can I use velocity js to apply gradient color to text? I've looked at https://css-tricks.com/snippets/css/gradient-text/ My specific need is to dynamically add a changing gradient using js. Thank you in advance. ...
I am attempting to replicate the functionality seen on the website. The issue I am facing is related to the event_content class. I want to display only a limited amount of content initially, and then hide the excess content. Upon clicking the plus class, ...
Looking to create an email send function in a pop-up on my website that can be accessed via the following link: The issue I'm facing is that while it redirects perfectly to the thank you message, the PHP implementation does not seem to work after the ...
Currently, I am attempting to debug a website using Safari on a MacBook connected to an iPad. However, I am facing an issue where the tags cannot be opened for inspecting the content. When I try to open the wrapper, it does not expand to reveal the content ...
Here is the mockup I am working with: https://i.sstatic.net/bIepQ.png So far, I have made good progress with this code: https://codesandbox.io/s/codepen-with-react-forked-16t6rv?file=/src/components/TrendingNFTs.js However, I am facing a couple of challe ...
I am looking for a specific layout that consists of three columns: left, content, and right. The left and right columns will each have an image, with the left column image aligning to the left edge of the browser and the right column image aligning to the ...
When attempting to align an image in the middle vertically inside a DIV on my website, it does not work properly. This issue does not occur when I do it on jsFiddle. It appears there may be a CSS conflict that I am unable to identify. I have applied the s ...
Check out the code snippet below: <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="style ...
I am facing an issue where I want a span to start from the top and expand as the text length increases, but it is currently starting from the bottom and moving upwards. See the image below for reference: View Image <div style="width:70%;margin-left: ...
My program is designed to scan css files using the jar cssparser-0.9.5.jar and perform various operations on the data. public static Map<String, CSSStyleRule> parseCSS(String FileName) throws IOException { Map<String, CSSStyleRule> rul ...
I'm struggling to grasp the concept of the float attribute. Here's the code that is causing me confusion: #p1 { border: solid black 3px } <p id="p1" style="float:left">Paragraph 1</p> <a href="https://facebook.com" style="floa ...
I'm working on creating a HTML page with interactive options. I want to implement an option menu that will pop up when hovered over or clicked, allowing me to customize colors, background patterns, and more. It seems like this involves altering the CS ...
I am currently utilizing sweetAlert2 and attempting to integrate bootstrap 4 for button styling by implementing the following properties: buttonsStyling: false, confirmButtonClass: 'btn btn-primary btn-lg', cancelButtonClass: 'btn btn-lg&ap ...