How to Unset Max-Height

How to unset max-height?

Reset it to none:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

Reference

CSS: how to overwrite (unset) previously set max-width property values

I found the issue was that the above max-width was being set on the container rather than on the <img> tag itself where the <img> tag had its own max- and min-width values set and removing/ adjusting these resolved this CSS.

WPF reset maxWidth and maxHeight to default

You can set the MaxWidth and MaxHeight property of a WPF window to double.PositiveInfinity which is the default value for both. This will remove any max constraint:

//store the current/previous value
double oldMaxWidth = this.MaxWidth;
//remove the constraint
this.MaxWidth = double.PositiveInfinity;

How to override max-width for specific div?

Are you just looking to unset the max-width property? If so, try:

#pixel-perfect img {
    max-width: none;
}

Why unsetting max and min width/height css properties require different values?

The none value only applies to max-height / max-width. This is because there is no limit on the height / width of the box. Hence, the default value for these properties is none.

The none value is not permitted on min-height / min-width because boxes cannot have negative height / width. Hence, the default value for these properties is 0.

Spec references:

• 10.4 Minimum and maximum widths: min-width and max-width
• 10.7 Minimum and maximum heights: min-height and max-height

max-height overriding height

Think of min-height and max-height as the minimum and maximum valid calculated value for height.

So if you set min-height:100px; and max-height: 1000px; the element will always have a height between 100 and 1000px. So if you set the height to 500px, then that value is in the allowed range, and that is used as the real height.

But if you set height to 2000px, then than is not within the allowed range, so the height will be reduced to 1000px, so it comes within the allowed range.

But setting both max-height and height in px, don't make a lot of sense. Because then the smallest of max-height and height will always be used.

The normal use is to combine % and px.

if you set something like width:100%; max-width:700px; Then you have set the width to 100% of the available space, but it should still newer be more then 700 pixel.

You can also do it the other way:
width:50%; min-width:500px; This will use half the available space, but always at least 500 pixels.

Remove height property using @media

Use height: auto in the media query. That's the default setting. It will overwrite the fixed height in your standard CSS.

p {

  overflow-y: hidden;

  height: 150px;

  background: green;

}

@media screen and (min-width: 700px) {

  p {

    height: auto;

    max-height: 150px;

    background: yellow;

  }

}

<p>

  Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello

</p>

<strong>h1</strong>

---

Related Topics