CSS сетки - заполнение вызывает переполнение дочернего элемента - PullRequest
Новая
       3

CSS сетки - заполнение вызывает переполнение дочернего элемента

0 голосов
/ 30 июня 2019

Вот мой код: 

.media {
  display: grid;
  box-sizing: border-box;
  padding: 10rem;
  border: 1px solid red;
  grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));
}

.big-pic {
  width: 100%;
  height: 10rem;
  border: 1px solid blue;
}

.small-pic {
  display: inline-block;
  margin-right: -.5rem;
  width: 50%;
  height: 10rem;
  border: 1px solid blue;
}
<div class="media">
  <div class="column">
    <h2>On TV</h2>
    <div class="big-pic">
      Main Pic
    </div>
    <div class="small-pic">
      Pic 1
    </div>
    <div class="small-pic">
      Pic 2
    </div>
  </div>

  <div class="column">
    <h2>In Theaters </h2>
    <div class="small-pic">
      Pic 1
    </div>
    <div class="small-pic">
      Pic 2
    </div>
    <div class="big-pic">
      Main Pic
    </div>
  </div>

Когда вы уменьшите размер экрана браузера, дочерние элементы будут переполнены из контейнера.Почему ширина column (a wrapper <div> with a class of column) не заполняет ширину родителя?

Я использовал grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr)); Так что 1fr должен заполнить ширину родителя.Когда вы добавляете заполнение, оно переполняется.Без отступов он заполняет ширину родительского элемента.Не уверен, что происходит.

Добавление box-sizing: border-box также не решает проблему.Есть идеи как это исправить?

...