Почему в этом коде фон родителя видно слева и справа, а сверху и снизу нет?

* {
  font-family: Verdana, Geneva, sans-serif;
  color: #000;
  font-size: 14.3px;
}

.parent {
  width: 600px;
  margin: 50px auto;
  background-color: red;
  overflow: hidden; /* <<<<<<<< */
}

.parent .child {
  padding: 20px;
  background-color: #fff;
  margin: 1px 1px 1px 1px;
  line-height: 1.5;
}

<div class="parent">
    <div class="child">Далеко-далеко за&nbsp;словесными горами в&nbsp;стране гласных и&nbsp;согласных живут, рыбные тексты. Прямо речью обеспечивает запятой! Бросил даже домах парадигматическая большой, гор составитель рукописи она, то&nbsp;имени буквенных переписывается первую страна осталось за&nbsp;скатился это от&nbsp;всех возвращайся, журчит запятой, океана? Грустный запятых его знаках назад, встретил заманивший коварных, города они. Курсивных, сбить?</div>
    <!-- <div class="help"></div> -->
  </div>

* {
  font-family: Verdana, Geneva, sans-serif;
  color: #000;
  font-size: 14.3px;
}

.parent {
  width: 600px;
  margin: 50px auto;
  background-color: red;
  display: grid; /* <<<<<<<< */
}

.parent .child {
  padding: 20px;
  background-color: #fff;
  margin: 1px 1px 1px 1px;
  line-height: 1.5;
}

<div class="parent">
    <div class="child">Далеко-далеко за&nbsp;словесными горами в&nbsp;стране гласных и&nbsp;согласных живут, рыбные тексты. Прямо речью обеспечивает запятой! Бросил даже домах парадигматическая большой, гор составитель рукописи она, то&nbsp;имени буквенных переписывается первую страна осталось за&nbsp;скатился это от&nbsp;всех возвращайся, журчит запятой, океана? Грустный запятых его знаках назад, встретил заманивший коварных, города они. Курсивных, сбить?</div>
    <!-- <div class="help"></div> -->
  </div>

* {
  font-family: Verdana, Geneva, sans-serif;
  color: #000;
  font-size: 14.3px;
}

.parent {
  width: 600px;
  margin: 50px auto;
  background-color: red;
  display: flex; /* <<<<<<<< */
}

.parent .child {
  padding: 20px;
  background-color: #fff;
  margin: 1px 1px 1px 1px;
  line-height: 1.5;
}

<div class="parent">
    <div class="child">Далеко-далеко за&nbsp;словесными горами в&nbsp;стране гласных и&nbsp;согласных живут, рыбные тексты. Прямо речью обеспечивает запятой! Бросил даже домах парадигматическая большой, гор составитель рукописи она, то&nbsp;имени буквенных переписывается первую страна осталось за&nbsp;скатился это от&nbsp;всех возвращайся, журчит запятой, океана? Грустный запятых его знаках назад, встретил заманивший коварных, города они. Курсивных, сбить?</div>
    <!-- <div class="help"></div> -->
  </div>

* {
  font-family: Verdana, Geneva, sans-serif;
  color: #000;
  font-size: 14.3px;
}

.parent {
  width: 600px;
  margin: 50px auto;
  background-color: red;
  display: flow-root; /* <<<<<<<< осторожно с кроссбраузерностью! */
}

.parent .child {
  padding: 20px;
  background-color: #fff;
  margin: 1px 1px 1px 1px;
  line-height: 1.5;
}

<div class="parent">
    <div class="child">Далеко-далеко за&nbsp;словесными горами в&nbsp;стране гласных и&nbsp;согласных живут, рыбные тексты. Прямо речью обеспечивает запятой! Бросил даже домах парадигматическая большой, гор составитель рукописи она, то&nbsp;имени буквенных переписывается первую страна осталось за&nbsp;скатился это от&nbsp;всех возвращайся, журчит запятой, океана? Грустный запятых его знаках назад, встретил заманивший коварных, города они. Курсивных, сбить?</div>
    <!-- <div class="help"></div> -->
  </div>