The max-height property is not applied to a border-box div with padding

Question

The max-height property is not applied to a border-box div with padding

One technique we use is the percentage trick on paddings to maintain aspect ratio in a div as the user scales their window. Here's an example:

.div {
    background: red;
    width: 80%;
    margin: 0 auto 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 20%;
}

Now, we want to set a maximum height for this div. Since the height of the div is determined by the padding and we need the div to be border-boxed, everything seems fine up to this point. But when attempting to use a max-height on the div, it doesn't work as expected.

.div {
    max-height: 60px;
}

I've created a fiddle to demonstrate the issue: http://jsfiddle.net/UxuEB/3/.

I've tested this on Chrome, Firefox, and Internet Explorer. Can someone please help me understand what I'm doing wrong or why this isn't working as intended?

css

Answer 1

Answer №1

Although I am quite late in providing this answer, I found myself dealing with the same issue today and stumbled upon this question as the first result on Google. Below is the code that I used to solve it, which may be helpful for someone facing a similar challenge in the future.

To begin, include an additional inner div:

<div class="control control-max-height">
  <div class="control-max-height-inner">
    Max-height
  </div>
</div>

Adjust the padding of the inner div while hiding the overflow of the outer div like so:

.control {
    background: red;
    width: 80%;
    margin: 0 auto 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.control-max-height {
    max-height: 120px;
    overflow: hidden;
}

.control-max-height-inner {
    padding-bottom: 20%;
}

It should be noted that this method assumes you are comfortable with concealing part of the inner element when it overflows. In my scenario, this was not an issue as the inner element only contained an empty link to enable the entire section to be clicked, while the outer element featured a centered background image and a border.

For a visual representation, please refer to the fiddle: http://jsfiddle.net/UxuEB/7/

Answer 2

Although I am quite late in providing this answer, I found myself dealing with the same issue today and stumbled upon this question as the first result on Google. Below is the code that I used to solve it, which may be helpful for someone facing a similar challenge in the future.

To begin, include an additional inner div:

<div class="control control-max-height">
  <div class="control-max-height-inner">
    Max-height
  </div>
</div>

Adjust the padding of the inner div while hiding the overflow of the outer div like so:

.control {
    background: red;
    width: 80%;
    margin: 0 auto 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.control-max-height {
    max-height: 120px;
    overflow: hidden;
}

.control-max-height-inner {
    padding-bottom: 20%;
}

It should be noted that this method assumes you are comfortable with concealing part of the inner element when it overflows. In my scenario, this was not an issue as the inner element only contained an empty link to enable the entire section to be clicked, while the outer element featured a centered background image and a border.

For a visual representation, please refer to the fiddle: http://jsfiddle.net/UxuEB/7/

Answer 3

Answer №2

When using the max-height property, it affects the element's height but you might also want to apply it to both the height and padding-bottom.

Some may confuse this with the box-sizing property which includes the padding in the overall height of the element (I was one of them too). However, as demonstrated in the jsFiddle example, this is not the case.

For instance:

If the element's content has a height of 100px.
Setting the max-height to
```
50px</code</li>
<li>Then adding a <code>padding-bottom
```
of 100px (more than the element's original height).
The total height of the element will be 150px, including the added padding.

Check out the JsFiddle example for a visual demonstration: here

Answer 4

When using the max-height property, it affects the element's height but you might also want to apply it to both the height and padding-bottom.

Some may confuse this with the box-sizing property which includes the padding in the overall height of the element (I was one of them too). However, as demonstrated in the jsFiddle example, this is not the case.

For instance:

If the element's content has a height of 100px.
Setting the max-height to
```
50px</code</li>
<li>Then adding a <code>padding-bottom
```
of 100px (more than the element's original height).
The total height of the element will be 150px, including the added padding.

Check out the JsFiddle example for a visual demonstration: here

Answer 5

Answer №3

Taking inspiration from Mike's solution in his post, you can accomplish the same effect using just one DOM element and a pseudo element, like so:

Here is the HTML:

<div class="new-div"></div>

And here is the CSS:

div.new-div {
  max-height: 200px;
}

div.new-div::before {
  content: '';
  display: block;
  padding-bottom: 60%;
}

Answer 6

Taking inspiration from Mike's solution in his post, you can accomplish the same effect using just one DOM element and a pseudo element, like so:

Here is the HTML:

<div class="new-div"></div>

And here is the CSS:

div.new-div {
  max-height: 200px;
}

div.new-div::before {
  content: '';
  display: block;
  padding-bottom: 60%;
}

Answer 7

Answer №4

The min-height CSS property is used to specify the minimum height of an element when its height is determined by padding alone, whereas max-height does not have this restriction.

Interestingly, in 2020, the min and max CSS units have become quite useful for achieving desired outcomes.

.classthatshoulddefineheight {
   padding-bottom: min(20%, 60px); 
}

Therefore, if 20% results in a height greater than 60px, the height will be capped at 60px (taking the minimum value between them).

Answer 8

The min-height CSS property is used to specify the minimum height of an element when its height is determined by padding alone, whereas max-height does not have this restriction.

Interestingly, in 2020, the min and max CSS units have become quite useful for achieving desired outcomes.

.classthatshoulddefineheight {
   padding-bottom: min(20%, 60px); 
}

Therefore, if 20% results in a height greater than 60px, the height will be capped at 60px (taking the minimum value between them).

Answer 9

Answer №5

One potential drawback of Mike's solution (as well as Brad's approach, although Brad's method can help reduce the number of container levels) is its reliance on overflow: hidden - a limitation that may not be suitable for certain use cases.

To address this issue, I have modified the example by introducing an additional layer and utilizing absolute positioning instead of overflow: hidden.

http://jsfiddle.net/8saj91dh/1/

The key is to insert another container within the inner box, set it to position:absolute, and apply max-height to this new container as well:

.inner-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 150px;
}

By adding some extra DOM elements, this revised approach should function effectively across various scenarios in most modern browsers.

Answer 10

One potential drawback of Mike's solution (as well as Brad's approach, although Brad's method can help reduce the number of container levels) is its reliance on overflow: hidden - a limitation that may not be suitable for certain use cases.

To address this issue, I have modified the example by introducing an additional layer and utilizing absolute positioning instead of overflow: hidden.

http://jsfiddle.net/8saj91dh/1/

The key is to insert another container within the inner box, set it to position:absolute, and apply max-height to this new container as well:

.inner-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 150px;
}

By adding some extra DOM elements, this revised approach should function effectively across various scenarios in most modern browsers.

Answer 11

Answer №6

To fix the issue, you can use the CSS property display: flow-root; on the main container element.

Answer 12

To fix the issue, you can use the CSS property display: flow-root; on the main container element.

The max-height property is not applied to a border-box div with padding

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

What is the best way to navigate back to the top of the page once a link has been clicked?

What sets apart the <img> and <Image> layout attributes in NextJS?

extract individual components from the google books api

Finding a jQuery DOM element without using a loop

Tips for customizing the appearance of date circles and text in Vue V-Calendar.io

Ways to Get Rid of Line Beneath the Table

stacking order of floated and positioned elements

Learn how to smoothly scroll to the top of a div by clicking on a team name

Tips for avoiding a large <ul> element from spilling over the body in a flexbox design

Designing numerous vertical lists in HTML

Javascript Calculator with Dual Input Fields

Materialize.css | managing spaces, indentation, and 'overriding' in a span element

Efficiently shrink column width in Material-UI's <TableRow/> using ReactJS and Material-UI

What is the best way to calculate the number of squares required to completely fill a browser window in real-time?

Craft a search bar inspired by Google's iconic design using CSS styling

What is the method for configuring body attributes in CSS with AngularJS?

I'm curious about the specific purpose of /1 in font styling at 16px

Locate the checkbox label using CSS

Elevate your Material UI Avatar with an added level of

Customize Cell Styling with Bootstrap Full Calendar CSS