flex item set height cannot show specific height

Question

following is my code, I set .it {height: 100px} but in my chrome, "it" show height 60px

.c {
  display: flex;
  position: relative;
  flex-wrap: nowrap;
  align-items: normal;
  flex-direction: column;
  height: 300px;
}

.it {
  min-height: 0;
  background-color: #212121;
  height: 100px;
}

.it2 {
  flex-grow: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: pink;
}

.it2>div {
  height: 400px;
}

<div class="c">
  <div class="it">
  </div>
  <div class="it2">
    <div></div>
  </div>
</div>

the result: