Elements in flex container with predefined size

I have a flex box container that contains two containers as follows:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1;
}

.msger {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  width: 80%;
  max-width: 80%;
  margin: 25px 10px;
  height: calc(100% - 50px);
  border: var(--border);
  border-radius: 5px;
  background: var(--msger-bg);
  box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
  min-width: 80%;
}

.chart-container {
  width: 80%;
  min-width: 80%;
  max-width: 80%;
}

<!-- language: lang-html -->

<div class="flex" id="flex">
  <section class="msger" id="msger_id">
    .....
  </section>
  <div class="chart-container" id="chart">
    ....
  </div>
</div>

<!-- end snippet -->

The problem now is that everything is squeezed together. I would like that msger fills the full height of the screen and then chart-container should be added below and should take as much space as it needs (in total both containers will take more than the height of the screen). For this purpose I have added height: calc(100% - 50px); to msger but somehow it does not take the full screen height.

How can this be done?

The reason everything is squeezed together is because of 'display: flex' in flex class. Since the height of the 'flex' element is not set, it is taking only the height of the content.

To solve this, you can add 'height: 100vh;' to the 'flex' element. this would make the flex element use the height of the screen.

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1;

  height: 100vh;
}