Is there a way to increase the height of a column within a fixed size overflowed div?
When using overflow: auto, setting height: 100% does not extend all the way to the end of the scroll.
In my JSFiddle demonstration, I am aiming for the red column to match the size of the blue column.
According to Blazemonger's advice, you can utilize the display: flex property on a div nested within your overflowing div to achieve this effect.
HTML Code Snippet
<html>
<body>
<div class="row row-scroll">
<div class="content">
<div class="column blue">
AAA BB CC DD AAA BB CC DD AAA BB CC DD D AAA BB CC DD AAA BB CC DD
</div>
<div class="column red">
BBB
</div>
</div>
</div>
</body>
</html>
CSS Style Rules
.row-scroll {
height: 130px;
overflow-y: auto;
background-color: gray;
}
.content {
display: flex;
}
For a live demonstration, check out this Fiddle
Hey there, I hope you're having a great start to the New Year! Recently, I've been working on creating a calculator using HTML, CSS, and JavaScript. One thing that's been puzzling me is how to make sure that the content in the input field do ...
I've been experimenting with creating moving/scrolling text. After some trial and error, I've managed to achieve this effect. If you're interested, you can check out the code on CODEPEN. The issue that's currently bothering me is rel ...
In my HTML code, here is a link to an image: https://i.sstatic.net/zhj7o.jpg I have successfully completed the sections associated with this image: https://i.sstatic.net/wIE6N.png However, I'm facing an issue now. I am unable t ...
Currently, I am attempting to achieve a transparent background for a time-series chart created with FusionCharts. Despite trying the standard attributes that usually work on other chart types and even hardcoding a background color, none of these seem to af ...
Embarking on my journey in web development using node.js, I encountered an issue while trying to load a particular page, which led to the following error message in my browser: Cannot GET /public/pages/terms-and-conditions.html The file structure is orga ...
My primary language is Spanish, which means I use accent marks quite frequently (á, é...). When I need to type them out, I resort to using á, é, and so on. However, I'm facing an issue when trying to compare two sentences in m ...
When trying to select a link tag (a) with a specific data-attr, I encountered an issue. I currently use the following regex pattern: /<a.*?data-extra-url=".*?<\/a>/g. However, I noticed that this selection goes wrong when there are no line br ...
I am relatively new to CSS and came across an issue with Skeleton when resizing the browser window. I have an image and text displayed next to each other in columns, as shown below (although there is much more text in reality). Everything looks fine initia ...
Looking for a quick fix here! I've been trying to make the entire button clickable, but so far, only the text is hyperlinked. Any suggestions on how to enclose the whole button with the link? As you can see, I'm working on making it mobile-friend ...
I have a jQuery script that controls the opening and closing of the "shopping_cart" div when hovering over the "shopping_button". $('#shopping_button, .shopping_cart').on('mouseenter',function(){ $(this).css('z-index',&apos ...
After finding a helpful example on Stack Overflow, I successfully implemented a similar layout for product boxes in a JSFiddle. I then replicated the CSS and HTML almost exactly on my Wordpress blog, but encountered an issue where the title, description, a ...
Currently, I'm attempting to construct some HTML markup within a Spring controller. Here is a snippet of the code: append(sb ,"<div class="myDiv">"); This code snippet ends up generating the following HTML source in the brows ...
Hello everyone, I am in need of creating a unique slideshow for my website and I want to start by splitting a div into two sections using a slightly skewed diagonal line that is either semi-transparent black or solid white. I have searched extensively onli ...
Check out this basic pug file snippet: p Hello The back end consists of typical components such as node, express, passport, and sql. You can set up a route like this: app.get('/example', (request, response) => { response.render('exam ...
I need to create a flexbox layout with two divs that split the screen evenly. However, I want the flexbox to change direction from row to column and make each div full width and height of the screen when the viewport is smaller than 800px, creating a scrol ...
Currently, I am in the process of learning how to create a custom WordPress meta box with a select tag for controlling the color scheme of individual posts/pages. My goal is to implement a system where I can use if statements to load an additional CSS file ...
whitespace-pre-line doesn't seem to be working for me. I attempted to replicate the same code from my text editor on https://play.tailwindcss.com/, and it worked perfectly. Below is a screenshot that I have attached. This is the sample code in my tex ...
I have a script that can add a new column to an HTML table. When the user clicks on add group, the header will change to Group1, Group2, and so on. I am currently adding a function for delete group that can delete all the added columns. The issue now is th ...
I have created a form that looks like this: <form method="POST" action="create.php" data-id="0" class="postForm"> <input type="hidden" id="#formId" value="1"> <textarea class="formBodyText"></textarea> <button typ ...
I am currently utilizing ngModel for a textarea, and I would like to be able to enable and disable the textarea based on a certain condition. Even though I have bound it correctly and the value is changing to [attr.disabled]="false", the textarea remains d ...