CSS：高度覆盖最小高度：最小内容

Question

我有一个 div，悬停时应该会打开以显示完整内容，但是 min-height 没有生效。

这是一个 JSFiddle 测试：

<html>

<head>
  <style>
    .test {
      min-height: min-content;
      height: 50px;
      overflow: hidden;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div class="test">test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test</div>
</body>

</html>

如果min-height设置为80px而不是'min-content'，它会生效并且div被放大。

min-height: min-content 所有文本都应该可见，但事实并非如此。 height 覆盖 min-height，如果它设置为 min-content。
-webkit-min-content 也是如此。

这适用于 Chrome 和 iOS 之前。我有 iOS 和 Chrome 76，但两者都不起作用。

Answer 1

如果想法是在不悬停时只显示 50px，而在悬停时显示所有内容，为什么不在正常状态下设置 max-height 然后在 :hover 上将此最大值设为 unset?

.test {
  max-height: 50px;
  overflow: hidden;
  background-color: yellow;
}

.test:hover {
  max-height: unset;
}

<div class="test">test<br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
</div>

CSS：高度覆盖最小高度：最小内容

CSS: height overriding min-height: min-content

html

css

height