使用flexbox进行省略

Question

我是flexbox的新手，并尝试将一些文本转换为省略号。

相反，它正在拉伸容器。

如果我没有正确设计使用flexbox的html，请告诉我。谢谢！

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;
}

<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>
        <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 class="footer">4</div>
    </div>
  </div>
</div>

https://jsfiddle.net/2kypet5e/