inline-flex игнорирует отступы родителя, когда inline-block не

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>