Flex direction column with 100% height dont work with overflow

Question

I have page with 100% height and column with items+form, items alighn to buttom. Then i add new items overflow scroll dont work.

 <div class="column">
          <div class="items">
            <div class="item">Harry Potter</div>
          </div>
          <div class="form"><button>ADD items</button></div>
  </div>

body,html{
  height: 100%;
  margin: 0;
  padding: 0
}

.column{
  height: 100%;
  background-color: #766;
  display: flex;
  flex-direction: column;
}

.items{
  background-color: #432;
  padding: 8px;
  flex-grow: 1;
  width: 200px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.item {
   margin: 4px;
   background-color: orange;
}

.form{
  background-color: #834;
  margin: 8px;
}

You can try in sandbox (for correct hide jsfiddle console):