Как сделать чтобы блок не выходил за пределы родителя?

Question

[cracker-test]

Есть блок обертка у которого position: fixed и width: 100%, чтобы блоки, которые были внутри были на всю ширину блока. Подскажите, как сделать так, чтобы внутренние элементы не выходили за границы блока обертки?

Comments

[Ankhena]

Подскажите, как сделать так, чтобы внутренние элементы не выходили за границы блока обертки?

Сначала нужно выяснить почему они вылезают из родителя...
Для этого сделать песочницу с видимой проблемой на codepen.io

Answer 1

[Kalinno]

Обратите внимание на .wrapp - это блок который равен ширине всего родителя , а тот в свою очередь с фиксированным позиционированием

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum deleniti eius magnam possimus corrupti aspernatur rem dolorum laudantium ullam, eum perferendis ipsam vero fugit harum, iusto esse alias nostrum nesciunt?</p> 
<div class="fix_block"> 
 <div class="wrapp"> 
  <div class="firstLineleft"></div> 
  <div class="firstLineright"></div> 
 </div> 
</div>

body { 
  font-family: sans-serif; 
  background: lightgreen; 
  height: 200vh; 
} 
.fix_block { 
  width: 100%; 
  height: 20vh; 
  position: fixed; 
  top: 30vh; 
  background: lightcoral; 
} 
.wrapp { 
  width: 100%; 
  height: 50%; 
  margin-top: 20px; 
  background-color: lightgrey; 
  display: flex; 
} 
.firstLineleft{ 
  width: 50%; 
  height: 50%; 
  background-color: lime; 
} 
.firstLineright{ 
  width: 50%; 
  height: 80%; 
  background-color:lightslategrey; 
}