Boxes in columns, should scroll horizontally not vertically

HTML

<div class='outer'>
  <div class='box'>
    <h1>The title 1</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 2</h1>
    <p>
      Some different text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 3</h1>
    <p>
      Some longer text here. Danish croissant. Powder halvah. Tootsie roll topping tiramisu jelly-o fruitcake cheesecake marzipan.
    </p>
  </div>
  <div class='box'>
    <h1>The title 4</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 5</h1>
    <p>
      Some text here. Chocolate cake gummi bears wafer apple pie. Bear claw gummies pie sugar plum jujubes. Liquorice croissant sugar plum danish macaroon.
    </p>
  </div>
  <div class='box'>
    <h1>The title 6</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 7</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 8</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 9</h1>
    <p>
      Some varied text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 10</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 11</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 5</h1>
    <p>
      Some text here. Chocolate cake gummi bears wafer apple pie. Bear claw gummies pie sugar plum jujubes. Liquorice croissant sugar plum danish macaroon.
    </p>
  </div>
  <div class='box'>
    <h1>The title 5</h1>
    <p>
      Some text here. Chocolate cake gummi bears wafer apple pie. Bear claw gummies pie sugar plum jujubes. Liquorice croissant sugar plum danish macaroon.
    </p>
  </div>
  <div class='box'>
    <h1>The title 5</h1>
    <p>
      Some text here. Chocolate cake gummi bears wafer apple pie. Bear...

CSS

.outer {
  height: 300px;
  padding: 25px;
  overflow: auto;
  background: #fc8;
  display: flex;
  flex-flow: column wrap;
}

h1 {
  font-size: 18px;
  margin: 1px 0px 3px 0px;
  color: #248;
}

p {
  font-size: 13px;
}

.box {
  margin-right: 50px;
  background: #def;
  vertical-align: top;
  width: 100%;
}