为什么 vh 有效而 % 无效？ （高度 css）

Question

我有一个非常简单的代码，这个特殊问题经常发生在我身上。我不明白为什么 % 不会改变高度，只有 vh 会。相反，width 没有这个问题，我可以用 % 来设置。

这是应用组件：

import MainPage from "./MainPage/MainPage";
import Headline from "./Headline/Headline";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Headline />
      <MainPage />
    </div>
  );
}

和它的 CSS：

.App {
  height: 100%;
  width: 100%;
  text-align: center;
  background-color: white;
  display: flex;
  flex-direction: column;
}

这是标题组件。在这里你可以看到问题：

import "./Headline.css";

function Headline() {
  return (
    <div className="headline-container">
      <div className="headline">Cryprocurrency Tracker</div>
    </div>
  );
}

这里是 Headline 的 css：

.headline-container {
  height: 10vh;      --------> % doesn't work, I can change the height only with vh.
  width: 100%;       --------> width however doesn't have this problem at all.
  background-color: #0060ff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: white;
  font-size: 30px;
  font-weight: 800;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

.headline {
  height: 100%;
  width: 90%;
  display: flex;
}

编辑：这里是索引 css 以防万一。索引中只有一个子组件，它是应用程序：

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}