Почему последующие элементы в потоке игнорируют дочерний элемент родителя и залезают на него?

* {
  margin: 0;
  padding: 0;
}

.parent {
  width: 500px;
  max-height: 300px;
  background: pink;
}

.child {
  width: 500px;
  height: 500px;
  background: green;
  margin-top: 30px;
  margin-bottom: 30px;
}

.content {
  width: 100%;
  height: 50px;
  background: grey;
}

p {
  background: rgba(66, 135, 245, .5);
}

<div class="parent">
  <div class="child"></div>
</div>

<div class="content"></div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus blanditiis quisquam explicabo impedit nesciunt similique eius magni placeat? Ut repellendus eaque odit aut ipsa ducimus quidem aperiam soluta eum veritatis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique natus maiores commodi. Qui praesentium amet sequi aliquid quae dolor fugit delectus et provident inventore, repudiandae molestiae, mollitia quidem, minus perferendis. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis libero et, est, sint distinctio dolor qui delectus hic facere dolorem debitis deleniti, perspiciatis voluptatum cupiditate harum possimus aspernatur? Molestiae, dolores! Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa nulla veritatis quae in fugit vero, reprehenderit quibusdam expedita rerum cumque ipsum obcaecati optio non omnis nostrum laboriosam quisquam iusto suscipit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, cumque recusandae. Odit, molestias eum facere maxime beatae perspiciatis itaque cum veniam ipsam sequi nemo sed, adipisci nihil consequuntur illum ea.</p>