Align container to center of screen, and align another container to the remaining bottom space of the first container

Question

I would like to have containers like this:

where the big container is at the center of the screen, and the smaller container is in the center of the remaining space of the bottom of the big container. This is what i have tried:

.Wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  min-height: 100vh;
  min-width: 100vw;
}
div {
  border: solid;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0
}

<div class="Wrapper">
  <div style="width: 300px; height: 250px;">
    big box
  </div>
  <div style="width: 300px; height: 30px; margin-top: 30px;">
    smaller box
  </div>
</div>

but it includes both of the containers to center in the screen. Is there another way?