Ensure that the child component's div element has a maximum height

I am attempting to ensure that the .box-content div takes up the maximum height available within boxA/boxB div. Inside boxA/boxB, there is a .box-header and a .box-content div. The .box-content shares the same div with the .box-header.

You can observe in this JSFiddle that the .box-content overflows its parent div.

How can I address this issue using only CSS while adhering to these two guidelines:

  1. The height of the .box-content must be flexible (adjustable whenever window size changes);
  2. The minimum height of the .box-content should be 200px;
htmlcssheightstretch

Answer №1

The challenge you are encountering is:

When the .box-content is set to 100% of its parent, it causes an issue with the .box-header element inside the same parent. This results in the .box-content being pushed down and needing to overflow in order to maintain 100% height of its parent.

To address this, I recommend the following CSS solution:

.box-content { height: 90%; }

.box-header {
    position: relative;
    background-color: green;
    padding:11px 8px 5px;
    color: white;
    height:10%;
}

For a demonstration, you can view this FIDDLE

Answer №2

if you have the option of using overflow (which I believe simplifies things), check out this demonstration

To keep the HTML structure the same, just make these two line changes to your css:

.boxA {
    width: 220px;
    padding: 0px 3px 5px 5px;
    float: left;
    height: 100%;
    margin-bottom: 0px;
    border: solid 1px green;
    overflow:hidden; /*this is added*/
}

.boxB {
    width: 420px;
    padding: 0px 5px 5px 3px;
    float: right;
    height: 100%;
    border: solid 1px red;
    overflow:hidden;/*this is added*/
}

Answer №3

To handle situations where the child div has a larger height, consider making the parent divs scrollable.

.containerA{ overflow:auto; } .containerB{ overflow:auto; }

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

Troubles with Marquee Element

Being a beginner in the world of html and css, I have encountered an issue while creating a responsive web page. At the top of my page, there is a text within a div which gets cut off from the right side as I decrease the browser width. Initially, I cons ...

htmlcss

Using Page.ResolveClientUrl in JavaScript or jQuery allows for easy resolution of client

I find myself in a predicament where I need to choose between using an HTML page instead of a .aspx page for performance reasons. Currently, I am using an aspx page solely because of the CSS and javascript file paths like: <script type="text/javascript ...

javascriptjqueryhtmlasp.net

Unable to make the Show/Hide Loading GIF function work as intended

Could someone please help me with my code? I'm trying to display a loading GIF image while waiting for an ajax request to complete. When the button is pressed, I want the loader to be shown until the data is returned from the server. I would greatly ...

jqueryhtmlcssajax

"Combining the powers of Ajax, jQuery, and PHP

I have developed a jQuery form that looks like this <div data-role="page" id="page3" data-theme="d" > <div data-role="header"> <h1 style="font-family: 'Open Sans Condensed', sans-serif;font- size:23px">LetsAllSave</h1> ...

phpjqueryajaxhtmljquery-mobile

Utilizing Jquery.validate() for personalized checkbox validation

My struggle lies in integrating jQuery.validate() with custom-designed checkboxes. I am unable to achieve the desired outcome where, upon clicking SUBMIT without selecting any checkboxes, an error should be displayed in the respective label. Despite having ...

javascriptjquerycsscheckboxjquery-validate

Pass an array from a script file in JavaScript to index.js within the Express framework

I've encountered a challenge in sending an array (or JSON object) from script.js to index.js, my express server file. I've explored various solutions such as passing the variable through an HTML file and then to another JavaScript file, utilizing ...

javascripthtmlnode.jsarraysexpress

When a page is loaded, CSS and images fail to load initially but successfully load upon refreshing the page

Hey everyone, I've set up a PHP MVC application with the following structure: helloworld - application - configs - controllers - models - layouts - include - library - public - .htaccess - index.php - design ...

phphtmlcss.htaccesszend-framework

Utilizing window.matchMedia in Javascript to retain user selections during page transitions

I am encountering difficulties with the prefers-color-scheme feature and the logic I am attempting to implement. Specifically, I have a toggle on my website that allows users to override their preferred color scheme (black or light mode). However, I am fac ...

javascriptjquerycssbackgroundlocal-storage

`javascript pop up notification will only display one time`

I am currently developing a chrome extension with two different modes. When the user clicks on the icon, a pop-up message should appear to indicate which mode is active. However, I am facing an issue where the message does not always display when the pop- ...

javascripthtmlgoogle-chrome-extensionpopup

Prevent the selection of Single Origin and House Blend options once the user opts for Espresso

<td> <select class="type"> <option value="Espresso">Espresso</option> <option value="" class="">Cappuccino</option> <opti ...

javascripthtmlweb

My Python script using selenium isn't functioning properly - what could be the issue?

Here is a code snippet: from selenium import webdriver driver = webdriver.Chrome(executable\_path=**"C:\\\\browserdrivers\\\\chromedriver.exe") driver.get("https://www.aliexpress.com/item/1005 ...

pythonhtmlseleniumselenium-webdriver

Ways to bypass or replace the overflow:hidden property of the parent container even when unable to modify its CSS styling

I'm encountering an issue. I'm currently developing a widget to showcase certain elements on a webpage. I have created a fiddle, please take a look: .wrapper { width: 300px; display: block; position: relative; overflow: hidden; back ...

jqueryhtmlcss

Email link spilling out from within image hyperlink

My website, located at , is experiencing an issue where the small envelope icon's mailto link is overflowing to the whole box instead of just the image itself. If anyone could provide assistance in resolving this issue, it would be greatly appreciate ...

htmlcsswebmailto

Is it possible to format these divs in a way that they appear inline with a line break at the conclusion?

I am looking for a display layout similar to the following: Div1 Div2 Div3 Div4 The HTML code is structured as follows: <div class="class1">Div1</div> <div class="class2">Div2</div> <div class="class1">Div3</div> < ...

csshtml

The Bootstrap floating label feature is causing a conflict with the jQuery validation labels

I'm currently utilizing the floating label code snippet from Bootstrap 5 documentation, along with jQuery validation. However, I'm experiencing conflicts with both labels when the error message is displayed. Here are some screenshots showcasing ...

htmljqueryjquery-validatebootstrap-5

Python's Selenium encountering a NoSuchElementException with the error message "./ancestor-or-self::form"

Trying to create a Python script that allows me to input my credentials and tweet text in the Python console. The script should then log in and post a tweet using Selenium. Everything works fine, except for the final click on the Tweet button which is caus ...

javascriptpythonhtmlseleniumtwitter

Initial page load experiencing issues with paroller.js functionality

Upon hard refreshing the page in the middle section, there seems to be an issue with the paroller js transform: translateY(); CSS effect not functioning properly on the <div class="col col-6" data-paroller-factor="0.4" data-paroller-type="foreground" da ...

javascriptjqueryhtmlcss

What is the reason for this code failing to verify the authenticity of the passcode?

The validation process is not functioning properly and there seems to be a missing alert dialog box. I would like the passcode entered by the user to be compared with the constant "Pass". const Pass = '2207' function checkValidity() { con ...

javascripthtmlcss

Varied approaches to managing responsive layouts

I am encountering an issue with the responsive design of a website I am currently developing. Scenario: The website features 3 different layouts for Desktop, Tablet, and mobile devices. These layouts consist of similar components with slight CSS adjustmen ...

javascriptjqueryhtmlcss

Resize drop zone with drag and drop functionality

I am using jQuery for dragging and dropping elements, but I am facing an issue. When I resize the drop zone while starting to drag an item, it seems like the previous size of the drop zone is still being used as the space. Is there a way to fix this? ...

javascriptjqueryhtmlcssdrag-and-drop