JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
  <div class="flex-container">
    <div class="column">
      <div class="header">Header text</div>
      <div class="item overflow">
        <div>This contains a lot of items want it to scroll:</div>
        <div>s</div>
        <div>s</div>
        <div class="ellipsis">Large amounts makes this container stretch and I do not know why. Please help me!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
      </div>
    </div>
  </div>
  <div class="flex-container">
    <div class="column">
      <div class="header">Header 2 text</div>
      <div class="item overflow">
        <div>This cointains a lot of items want it to scroll:</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
        <div>s</div>
       ...

CSS

body, html {
  margin: 0;
}

/*want exactly full page*/
.page {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.flex-container {
  display: flex;
  flex: 1;
}

/*create column container of fixed height/width*/
.column {
  display: flex;
  flex-direction: column;
  /*not growing or shrinking so height should stay fixed*/
  flex: 0 0 100%;
}

.overflow {
  overflow-y: auto;
}

.item {
  flex: 1;
}

/*fixed 50 px item*/
.header {
  width: 100%;
  flex: 0 0 50px;
  background-color: #00cab1;
  color: white;
}

.footer {
  flex-basis: 50px;
}

.ellipsis {
  /*this causes the container to strech in the x axis, so how do I get the text to ellipsis*/
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}