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

Align text to the right and do not include any images

Tips for accessing a DOM element's ::before content using JavaScript

The transition property in CSS and JavaScript does not seem to be functioning properly in Firefox

Take a snapshot of an element using fixed element positioning

Tips for ensuring Opera browser compatibility with buttons using the CSS background image property

Adjustable dimensions and proportions for the following image

JQuery functions for click and hover are not functioning as expected on a div element

Enhancing this testimonial slider with captivating animations

Background image color not displaying correctly

Display a snippet of each employee's biography along with a "Read More" button that will expand the content using Bootstrap, allowing users to learn more about each team

What is the impact of using overflow: hidden on block elements?

Combining data using D3's bar grouping feature

Utilizing a Single Background Image Across Several Div Elements

Is it possible to rotate a group within an SVG without altering the orientation of the gradient fill it contains?

Is it possible to use jQuery to search an unordered list by simply pressing a key on the keyboard?

Show the nested div when hovering over the containing div using JavaScript

Other options besides re-flowing and repainting

Tips for creating a dynamic text that adjusts to different screen sizes within a bootstrap button

Incorporate a Font Awesome icon into a Bootstrap 4 callout

Issues with Bootstrap column rendering in IE11's Flex layout