How to unset max-height?

How to I reset the max-height property to its default, if it has been previously set in some CSS rule? This doesn't work:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: auto; // Doesn't work at least in Chrome
}

Reset it to none:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

Reference

You can clear the max-height attribute by using the following css:

max-height:none; 

You can use

max-height: unset;

which resets a property to its inherited value if you are inheriting from its parent (will work as keyword inherit) and in case you are not inheriting it will resets to its initial value ( will work as keyword initial).

Just a note, if you're using JavaScript to style the element like $el.style.maxHeight = '50px'; using $el.style.maxHeight = 'none'; will not "reset" or "remove" the 50px, it will simply override it. This means that if you try to "reset" the max height of an element using $el.style.maxHeight = 'none'; it will apply the none value to the max-height property of the element, overriding any other valid max-height properties in CSS selection rules that match that element.

An example:

styles.css

.set-max-height { max-height: 50px; }

main.js

document.querySelectorAll('.set-max-height').forEach($el => {
  if($el.hasAttribute('data-hidden')){
    $el.style.maxHeight = '0px'; // Set max-height to 0px.
  } else {
    $el.style.maxHeight = 'none'; // 'Unset' max-height according to accepted answer.
});

To actually "unset" an inline style, you should use $el.style.removeProperty('max-height');.

To complete this for an entire style rule and not just a single element, you should first find the rule you want to modify, and then call the removeProperty function on that rule:

for(let i = 0; i < document.styleSheets[0].cssRules.length; ++i){
  if(document.styleSheets[0].cssRules[i].selectorText == '.set-max-height'){
    document.styleSheets[0].cssRules[i].style.removeProperty('max-height');
    break;
  }
}

You can find the StyleSheet and CssRule objects however you want, but for a simple application I'm sure the above would suffice.

Sorry for putting this as an answer, but I don't have 50 rep so I can't comment.

Cheers.

Use either

max-height: none;

or

max-height: 100%;

Note: the second one is relative to the height of the containing block.