当inline-block不行时，inline-flex会忽略父级的填充

Question

我正在使用CSS Flexbox制作网格。我面临的问题是，当我将网格的显示从inline-block更改为inline-flex时，孩子不再尊重padding-right了。在这方面，inline-flex的行为不应该与inline-block相同吗？如果是，是什么解释了这种差异？我之所以要切换为inline-flex，是因为我希望孩子（其显示设置为inline-block）垂直排列。我也很好奇为什么y溢出会影响行为。

         body { margin: 0; }

         /* wrapper sets the overall height. We use flex to make contents fill height. */
         .wrapper {
             height: 300px;
             display: flex;
             flex-direction: column;
         }

         /* grid can have header and body. header is omitted for now. */
         .grid {
             flex: 1 1 0; /* this makes grid same height as wrapper */
             display: inline-flex;
             flex-direction: column; /* lays out contents vertically */
             overflow-y: auto;   /* overflow-y strangely impacts whether padding is honored */
             padding-left: 15px;
             padding-right: 15px;
         }

         .grid-body {
             margin-top: 50px;
             margin-bottom: 50px;
             display: inline-block; /* makes width the same as row */
         }

         .row {
           width: 1420px;
           height: 30px;
         }

    <div class="wrapper">
      <div class="grid">
        <div class="grid-body">
          <div class="row" style="background-color:#de7;"></div>
          <div class="row" style="background-color:#7ed;"></div>
        </div>
      </div>
    </div>