Right padding ignored when using fixed height and horizontal scrolling with flexbox

Question

im trying to divide content into horizontal scrolling pages. What I need is fixed height and let the content layout to the right, but always last (right) padding or margin seems to be ignored (I even tried css3 columns with the same issue). What am I doing wrong?

<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 claw gummies pie sugar plum jujubes. Liquorice croissant sugar plum danish macaroon.
    </p>
  </div>
</div>

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

Here is a demo

http://jsfiddle.net/wyhjykr4/14/