Div проблема родителей и детей. Дети выходят за рамки родителей

Question

У меня есть div контейнер в котором 10 блоков div-детей. Все дети должны находиться строго в div-родителе не вылезая за рамки. На одном мониторе всё в норме, на другом дети вылезают. Помогите советом. Заранее благодарен.

Answer 1

попробуйте посмотреть в сторону свойства overflow

.child {
  display:  inline-block;
  
  width:  25px;
  height: 25px;

  margin: 5px;
  
  background: orange;
}

.parent1 {
  width:  100px;
  height: 50px;
  
  margin-bottom:  100px;
  
  border: 1px solid black;
}

.parent2 {
  width:  100px;
  height: 50px;
  
  margin-bottom:  10px;

  border: 1px solid black;
  
  overflow: hidden;
}

.parent3 {
  width:  100px;
  height: 50px;
  
  margin-bottom:  10px;

  border: 1px solid black;
  
  overflow: scroll;
}

<div class = 'parent1'>
  <div class = 'child'></div>
  <div class = 'child'></div>
  <div class = 'child'></div>
  <div class = 'child'></div>
  <div class = 'child'></div>
  <div class = 'child'></div>
</div>

<div class = 'parent2'>
  <div class = 'child'></div>
  <div class = 'child'></div>
  <div class = 'child'></div>
  <div class = 'child'></div>
  <div class = 'child'></div>
  <div class = 'child'></div>
</div>

<div class = 'parent3'>
  <div class = 'child'></div>
  <div class = 'child'></div>
  <div class = 'child'></div>
  <div class = 'child'></div>
  <div class = 'child'></div>
  <div class = 'child'></div>
</div>

БЛОГ НА HUSL

Div проблема родителей и детей. Дети выходят за рамки родителей

Ответы (1 шт):