答案很简单，因为百分比min-height是基于父容器的height值而不是min-height计算的。

* {margin:0;}

body {
  background: gray;
  height: 100vh; /* look here */
}

.container {
  background: silver;
  margin: 0 20px;
  min-height: 100%;  /* look here */
}

个字符
但是，对于min-height:inherit，它会从父容器继承min-height值。

* {margin:0;}

body {
  background: gray;
  min-height: 100vh; /* look here */
}

.container {
  background: silver;
  margin: 0 20px;
  min-height: inherit;  /* look here */
}

<div class="container">
  <h1>Some generic title</h1>
  <p>Some random paragraph</p>
</div>

的字符串
如果.container总是覆盖视口高度，我会直接在min-height:100%上设置.container。

* {margin:0;}

body {
  background: gray;
}

.container {
  background: silver;
  margin: 0 20px;
  min-height: 100vh; /* look here */
}

<div class="container">
  <h1>Some generic title</h1>
  <p>Some random paragraph</p>
</div>

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #ddd;
  min-height: 100vh;
  height: 100vh;
}

.container {
  background: #aaa;
  max-width: 500px;
  margin: 0 auto;
  padding: 1rem;
  min-height: 100%;
  height: 100%;
}

/* Uncomment for the expected behaviour */
/*
html,
body {
  height: 100%
}
*/

个字符

这个想法是min-height是100 vh或100%的情况下内容大于100 vh。

body {
  background: gray;
  height: max-content; 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  background: silver;
  margin: 0 20px;
  flex-grow: 1;
}

字符串