Menu
This style works for e.g. chrome.
p.ex1 {
max-height: fit-content;
height: 250px;
border:solid 1px black;
overflow: auto;
}
The intention is to use the whole height, with scrolling, if necessary, but shrink height to fit content if the content is small. However, how is this accomplished in Firefox?
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_dim_max-height
780
The max-height property in CSS is used to set the maximum height of a specified element. Authors may use any of the length values as long as they are a positive value. max-height overrides height, but min-height always overrides max-height .
The fit-content behaves as fit-content(stretch) . In practice this means that the box will use the available space, but never more than max-content . When used as laid out box size for width , height , min-width , min-height , max-width and max-height the maximum and minimum sizes refer to the content size.
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.
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.
Try Using:
p.ex1 {
max-height: fit-content;
height: -moz-max-content;
height: 250px;
border:solid 1px black;
overflow: auto;
}
height: -moz-max-content;
This tag will work as 'fit-content' for Mozilla.
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
