使用固定高度和使用flexbox水平滚动时忽略右边距

Question

我试图将内容划分为水平滚动页面。我需要的是固定高度，让内容布局向右，但总是最后（右）填充或边距似乎被忽略（我甚至尝试过css3列同样的问题）。我做错了什么？

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

这是一个演示

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