2

I'm trying to make my body element the height of the viewport, but expand if its content exceeds its height. I originally used min-height: 100vh to accomplish this.

However, as stated in this answer, an element with a percentage height will not work correctly inside my body because it uses min-height.

My next idea was to use the max function alongside min-content on my body:

body {
  height: max(100vh, min-content);
}

However this does not work. In Chrome devtools I get the following warning:

enter image description here

Invalid property value

Is there any solution to this problem?

More details

  • There will be one element inside body.
  • This element should be able to use percentage-based height values or auto.
  • The height of the body should expand if the content inside does not fit.
  • If the content inside body does fit, then any percentage-based height values would be based on the viewport height.
Community
  • 1
  • 1
David Callanan
  • 5,601
  • 7
  • 63
  • 105
  • *an element with a percentage height does not work correctly inside an element that uses min-height.* --> you need to understand why, because you cannot find a solution to this if you want your element to (1) define the height of the container and (2) has its height as percentage of the container. --> share your full code maybe the solution is somewhere else – Temani Afif May 30 '20 at 09:35
  • @TemaniAfif Maybe you are misunderstanding my question, I will update the question. – David Callanan May 30 '20 at 09:56
  • I understand what you want but you need to share a real use case with code if you want accurate solution. Your body will have 1 element, 2 elements? 1 column, 2 columns? etc ... we should know what you are trying to build. There is no generic solution to what you are asking. – Temani Afif May 30 '20 at 10:06
  • @TemaniAfif I was looking for a generic solution because it could vary. I'll update again. I'm mostly wondering why my solution doesn't work and why it is an invalid property value -- it seems right to me. I'll have to fallback to JavaScript if necessary. – David Callanan May 30 '20 at 10:13
  • 2
    min-content is not a valid value of max. If you checlk the MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/max) you can see the accepted values – Temani Afif May 30 '20 at 10:28
  • @TemaniAfif That explains it thanks – David Callanan May 30 '20 at 10:32
  • 1
    It makes me think of something that would work on a CSS grid, but not on a regular height attribute. You could try to set body to `display:flex; flex-direction:column; height:100%;` and add a wrapper div for everything containing `flex-grow:1;` Then I think using 100% inside that div has a different behavior. – roye7777777 May 30 '20 at 11:10

0 Answers0