5

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

chrome:

chrome

firefox:

firefox

8
  • I use FireFox Dev edition v61 and I get the same result!
    – MRP
    Commented Jun 6, 2018 at 14:23
  • 1
    developer.mozilla.org/en-US/docs/Web/CSS/max-height - fit-content is experimental and not supported in many browsers. I would use flex instead
    – Pete
    Commented Jun 6, 2018 at 14:34
  • why not use max-height: 250px and default auto height (which is exactly the content height) instead? Commented Jun 6, 2018 at 15:00
  • @Pete max-content is not, but gives the same result. I could use that, but I still need the answer.
    – Hawk
    Commented Jun 6, 2018 at 15:45
  • @IlyaStreltsyn This is just an example. My case uses calc and is dynamic. The question is still valid anyway.
    – Hawk
    Commented Jun 6, 2018 at 15:46

2 Answers 2

17

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.

7

this is what worked for me:

max-height: -moz-max-content;
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.