Why vh works and doesn t height css

Question

I have a very simple code, yet this problem arises frequently for me. I'm not sure why the percent doesn't affect the height, but vh does. On the other hand, width does not have this issue, and I could use percent to set it up.

This is the app component:

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

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

And its CSS:

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

This is the Headline component. Here you can see the problem:

import "./Headline.css";

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

And here is Headline's 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;
}

Answer 1

The height of an element, by default, takes the full height of the existing content, rather than the entire width of your screen. So, if you provide the height of an element as 100vh, it will take up the entire width of the screen. Now we force it to take up the entire width of the screen.