Почему отступ справа обрезается переполнением: scroll

Question

В приведенном ниже фрагменте кода padding-right для .ctr не отображается, когда содержимое начинает переполняться в маленьких окнах просмотра.

Я прочитал другие ответы и знаю, как это исправить . Мне просто нужно переместить padding:20px с .ctr на .row. Или просто добавьте margin-right:20px к последнему ребенку.

Но я не мог найти причину, почему это происходит . Может кто-нибудь объяснить, что происходит? Любой ресурс для дальнейшего изучения будет высоко оценен Thanks

Спасибо!

.ctr {
  display: flex;
  overflow-x: auto;
  padding: 20px;
}

.row {
  margin: 0 auto;
  display: flex;
}

.child {
  margin-right: 20px;
  width: 600px;
  height: 100px;
  background: red;
}

.child:last-child {
  margin-right: 0;
}

<div class="ctr">
  <div class="row">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Answer 1

Чувак, причина в rendering or calculation в браузерах (или логика c или разработанная нами система начинается с top/left и заканчивается на right/bottom). Итак, заполнение иерархии размещения:

margin > border > padding > content

(И, помните, это начинается с верха / слева).

Теперь проблема, которую вы видите, заключается только в том, что вы не увеличили высоту предмета. Если вы это сделаете - вы обнаружите проблему не только на right-padding, но и на bottom-padding.

Padding - это всего лишь попытка обернуть что-то гибкое. Когда вы задаете ширину 600 * 5 для элементов, они занимают большую ширину, чем доступно.

padding не такой сильный соперник, как маржа. Потому что помечаем apply на том же элементе - шириной или высотой которого вы манипулируете. padding применяется к элементу, который пытается наложить ограничения на некоторый другой элемент (обычно прямой дочерний элемент). Таким образом, это разница между padding и margin и тем, как они применяются на browsers через Box-Model.

Надеюсь, это прояснит немного.

Answer 2

Заполнение на самом деле есть, когда содержимое переполняется, оно скрывает его.

мы можем проиллюстрировать это, используя background и background-origin

.container {
  display: flex;
  overflow-x: auto;
  padding: 20px;
  width: 200px;
  background: linear-gradient(red, red) no-repeat;
  background-origin: content-box;
  border: 1px solid;
}

.overflow {
  background: pink;
  min-width: 400px;
  height: 100px;
  border: 1px solid;
}

<div class="container">
  <div class="overflow"></div>
</div>
the white space you see on the edges is the padding

background-origin: content-box; делает фон исключающим границы и отступы, что покажет нам, что отступ не обрезается, только потому, что заполнение является частью parent и содержимое переполняют родительское, так что оно покрывает его.

В этом нет ничего особенного.