The child element is bigger than its parent due to the maximum height set. There is no visible overflow

My goal is to create a parent element with a maximum height, and have a child element fill this parent. If the content in the child exceeds the parent's dimensions, a scrollbar should appear. I attempted to achieve this by:

div.parent {
  max-height: 50px;
  width: 100px;
  border: 1px solid black;
}

div.child {
  height: 100%;
  overflow-y: auto;
}
<div class="parent">
  <div class="child">
    <div class="some-content">
      abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br>
    </div>
  </div>
</div>

However, this solution did not produce the desired result. The child element ended up exceeding the boundaries of the parent.

I must emphasize that setting overflow-y: auto for the PARENT is NOT an option, as it may contain other elements that should not be scrolled. The intention is for the child to utilize the remaining space within the parent. For more details, please refer to the live DEMO link below.

Live DEMO

htmlcss

Answer №1

It's my understanding that achieving this with CSS alone is quite challenging. Essentially, you're requesting the browser to occupy the remaining space with a scrollable element. One way to accomplish this is by using JavaScript (the following example utilizes jQuery for simplicity):

$('.parent').each(function(){
    $(this).children('.child').height($(this).height() - $(this).children('.sibling').height()+"px");
});

Check out this JSFiddle link for a demonstration.

Answer №2

One potential solution could be utilizing Flexbox.

section.container {
    max-height: 400px;
    width: 250px;
    border: 2px solid #333;
    display: flex;
    flex-direction: column;
}
div.box {
    border: 1px solid green;
    flex: 0 0 auto;
}
div.content {
    overflow-y: scroll;
    border: 1px solid purple;
    flex: 0 1 auto;
}

It might seem like a workaround, but this method appears to address the issue effectively.

Answer №3

Take a look at this awesome Fiddle

div.container {
    max-height: 50px;
    width: 100px;

    border: 1px solid black;
    overflow:scroll;
}

div.content {
    height: 100%; 
}

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

Directly insert an image into your webpage by uploading it from the input field without the need to go through the server

Can an image be uploaded directly from <input type="file" /> into an HTML page, for example through the use of Javascript, without needing to first save the image to the server? I am aware that AJAX can accomplish this, but if there is a way to ...

javascripthtmlinputimage

Streamlining form submission processes with VBA automation of check box selections

Currently, I am facing a challenge with automating the process of filling out a web form using VBA. Specifically, I have hit a roadblock when it comes to selecting a checkbox in the form before proceeding. Here is the HTML code pertaining to the checkbox: ...

htmlvbaautomation

How to create vertical spacing between <a> elements within the same div using HTML and CSS

Currently, the layout in picture 1 shows how my content is displayed. I am looking to create spacing (bottom margin?) between the images like the example in picture 2. The two side-by-side blocks are separate DIVs, and the images within each line belong to ...

htmlcssimagemargin

iOS Safari is displaying the keyboard with a comma instead of a period

Is there a way to display a comma instead of a period on the iOS keyboard in Safari? Upon tapping on the input field, users are presented with a keyboard featuring a period. https://i.sstatic.net/nMFCg.png ...

ioshtmlsafari

I haven't quite mastered the art of styling and JavaScript, but I'm currently focused on creating an HTML form with

I attempted to create a button, but it's not functioning correctly. It should display 'Submit', but instead, it just shows a square. Since I haven't learned CSS yet and my online video instructor hasn't covered it either, I need as ...

htmlforms

Executing cssnano Using the Command Prompt

Although I'm not an expert in node JS, I have come across cssnano as a JavaScript tool for minifying CSS, which apparently does a more sophisticated job compared to the outdated YUI compressor. My only issue is that I am struggling to understand how t ...

cssnode.jsjarcmdyui

Teaching sessions along with the implementation of functions

I've created a set of input fields with the class replaceInput. The idea is to have a simple function that clears the value when the user focuses on the field, and then returns it to 'X' if the field is empty on focus out. My query is, coul ...

javascriptjqueryhtml

The backgroundImage function is having trouble locating the specified URL path

I'm struggling to set a backgroundImage because it's not recognizing the local path URL. Here is my code snippet: import { makeStyles } from '@material-ui/core/styles'; const loginWrapperStyles = makeStyles(theme => ({ image: { ...

cssreactjsmaterial-ui

Could the difficulty in clicking the first entry in Firefox be a bug?

Be sure to focus on the section highlighted in blue in the initial table. If you'd like, you can view the issue here view image http://example.com/static/error.gif UPDATE you can replicate it by double-clicking on the top portion of the first entry ...

htmlcssfirefoxcss-float

Achieving equal height for the englobing/parent div and the inner divs

To achieve a standard left, middle, and right column layout, it is necessary for me to enclose various inner divs of different heights within a surrounding/parent div. It is crucial that the parent div adjusts its height to match the tallest inner div, whi ...

csshtml

What is the best way to prevent URL modification in Angular?

Currently, I am working on a project with a specific page (let's call it localhost:XXXX/notification-page) and we want this to be the only URL that can be accessed. Any attempt to change the URL should redirect users back to the notification-page. As ...

htmlangularweb

What are the advantages of importing CSS files from JS source code with webpack, rather than building CSS in isolation as traditionally done?

If you're looking for information on how to load CSS with webpack, check out the documentation here: https://webpack.js.org/guides/asset-management/#loading-css1 The webpack documentation suggests importing CSS files from JavaScript code and using ex ...

csswebpack

Issues with PHP Mail Forms not functioning as intended

I've been struggling for hours trying to figure this out. I'm new to PHP mail form coding and any assistance would be greatly appreciated! Below are two images: one of the HTML code and one of the PHP code. It seems like a simple setup, but even ...

phphtmlformsemail

Steps to modify the background color of an IconButton upon clicking in Material UI

After clicking on the IconButton, the background color changes to an oval shape. I now need to modify the background color when it is clicked. CSS The CSS code for the IconButton changes the background color upon hover. I require a similar effect for the ...

csstypescriptmaterial-ui

set ajax url dynamically according to the selected option value

My form features a select box with three distinct choices <select id="tool" name="tool"> <option value="option1">Option1</option> <option value="option2">Option2</option> <option value="option3">Option3</ ...

javascriptjqueryhtmlajax

Adjusting the gap between TableRows in Material-UI

Is there a way to increase the spacing between TableRow MaterialUI components in my code? <S.MainTable> <TableBody> {rows.map(row => { return ( <S.StyledTableRow key={row.id}> <TableCell component="th" s ...

javascriptcssreactjsmaterial-uijsx

"Exploring the world of JavaFX: Unveiling the mysteries

Here are some CSS queries: How can I create a semi-transparent color using a color variable in CSS? * { -my-color: #123456; } .label { -fx-text-fill: ??? } What should be inserted in "???" to achieve a 50% opacity version of -my-color? Is it be ...

cssjavafx

Attempting to retrieve JSON data using jQuery

Currently, I have a PHP file that outputs JSON data like the following: {"news":[{"title":"title news example1","content":"blabla bla 1","img":"url"}, {"title":"title news example2","content":"blabla bla 2","img":"url2"}, {"title":"title news example3","c ...

jqueryhtmljson

The CSS file is failing to recognize the changes made to the data-theme attribute in the HTML

Currently implementing a dark theme on my website involves adding a toggle switch to the footer.html page, which adds a variable named data-theme = 'dark' to the html. The scss files of the footer and core are adjusting accordingly based on the c ...

javascripthtmlcsssass

Angular 6: A guide to dynamically highlighting navbar elements based on scroll position

I am currently building a single page using Angular 6. The page is quite basic, and my goal is to emphasize the navbar based on scrolling. Below is the code snippet I am working with: .sticky { position: sticky; top: 0; } #i ul { list-style-type: ...

htmlcssangulartypescript