I recreated an issue I've been facing with the toy example here

https://jsfiddle.net/958z6ckh/3/

.test{
  height: 5px;
  min-height: min-content;
  background: red;
  border: solid;
}

<div >
  <div>
    testljalfdkajsfldjdsalfjdsalfxsdal
    asfsadfasdfslafjlskdjfklsdjfklslsf
    askdlfjdslkajflkdsajflktestljalfdk
    ajsfldjdsalfjdsalfxsdal
    asfsadfasdfslafjlskdjfklsdjfklslsf
    askdlfjdslkajflkdsajflk
  </div>
</div>
```

I've found similar questions with workarounds but no answers that get to the crux of why min-height: min-content; fails to override the height property. Thanks

Edit: To clarify, this is a contrived example. The original desired result was to create a smooth-scroll webpage with sections that each have height equal to the view height minus the navbar unless it is insufficient to prevent overflow or require a scroll for the content. The same result could be achieved with just min-height: calc(100vh - 80px);. The bug simply led me to investigate and come up empty handed as to why the code in the example above does not produce the same result and appears to ignore the min-height.

CodePudding user response：

From the specification:

min-content

Use the min-content size in the relevant axis; for a box’s block size, unless otherwise specified, this is equivalent to its automatic size.

Then for "automatic size":

For min-width/min-height, specifies an automatic minimum size. Unless otherwise defined by the relevant layout module, however, it resolves to a used value of 0.

So min-height: min-content will resolve to min-height: 0. In other words, it has no effect.

CodePudding user response：

The best way to do it is to make another class within the main one and set the height of it to 'auto'

.test{
  height: calc(100vh - 20px);
  border: solid;
  float:left;
}

.text {
  height: auto;
  background: red;
  float:left;
}

  <div >
    <div >
      testljalfdkajsfldjdsalfjdsalfxsdal
      asfsadfasdfslafjlskdjfklsdjfklslsf
      askdlfjdslkajflkdsajflk
    </div>
  </div>