转换后的容器不随内容扩展

Question

出于某种原因，当我将内容放入“倾斜”的div容器中时，容器并没有从内容中增长。我从未定义过高度，所以我认为它会随着内容的增长而增长。

有谁知道为什么会发生这种情况？

Here is a codepen

HTML

<section class="slant-container">
  <div class="slanted first" style="background-color:#2ecc71;">
    <div class="unslant">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec nisl arcu. Quisque sed aliquet nisl. Aliquam varius maximus tellus a luctus. Pellentesque malesuada purus vestibulum iaculis tristique. Aliquam eu placerat nulla. In quis lorem in lectus dapibus pretium in non dolor. Proin quis ex rhoncus, bibendum tellus sed, ullamcorper mi. Pellentesque id libero sed mi dignissim iaculis sit amet ac nulla. Fusce gravida risus vitae leo cursus mattis. Pellentesque rhoncus velit vitae lacus hendrerit consectetur. Nulla maximus, lacus nec vestibulum pharetra, massa odio eleifend eros, non pellentesque lectus lectus id eros. Pellentesque id tellus tellus. Integer posuere ligula non mi mollis dapibus. In convallis lorem viverra urna molestie, eget sodales neque fringilla. Sed odio dolor, tincidunt pellentesque congue non, condimentum vitae libero. Praesent ullamcorper efficitur dui, vitae vestibulum nisl ornare id.

Ut laoreet efficitur maximus. Sed cursus, leo at tempor cursus, lectus metus facilisis metus, eu rhoncus magna elit at nulla. Proin sed nulla dolor. Sed non tortor ut tortor dignissim eleifend. Etiam nec egestas lacus. Sed commodo orci a tincidunt imperdiet. Vivamus non ornare tellus, sollicitudin feugiat dolor. Phasellus faucibus massa at diam convallis, quis condimentum nibh rhoncus. Morbi tortor tellus, iaculis ac fermentum vel, fringilla eu dolor. Nam vitae libero lectus. Integer nunc augue, egestas a ullamcorper vel, convallis ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce imperdiet rutrum mauris at fringilla. Nunc lacinia volutpat elit.

Fusce a faucibus neque. Curabitur malesuada urna eu elit egestas, et porta metus cursus. Aenean dignissim condimentum ultricies. Praesent a nisl velit. Vestibulum convallis lorem nec magna pellentesque, ultricies eleifend felis gravida. Morbi dictum dolor eget ex lacinia, sit amet condimentum felis bibendum. Phasellus quis ante eget dolor hendrerit cursus. Integer urna mi, auctor tempor urna a, varius varius justo. Nunc cursus eu neque vitae varius. Nullam tristique convallis blandit.

Donec eget elit iaculis, ultricies nibh sed, tempus sem. Nam ac erat sit amet ligula facilisis ullamcorper ac eu lectus. Aenean hendrerit enim in arcu maximus accumsan et auctor neque. Nunc lorem justo, congue eget ullamcorper malesuada, tincidunt sed ligula. Sed ut ultrices dolor. Donec et tristique lacus. Vivamus sodales euismod fermentum. In enim nibh, imperdiet non posuere at, tristique sit amet sapien. Suspendisse id congue mauris, sagittis pretium sapien. Ut vitae nunc in nisl convallis fermentum. Pellentesque sed aliquet sapien. Vestibulum fringilla, ex eget finibus ultricies, nisi massa rhoncus ex, sed dignissim sapien velit et diam. Morbi ut porta purus. Integer volutpat ante dictum, lobortis ante id, ultricies dolor. Quisque blandit, augue eu vestibulum feugiat, massa tellus dapibus erat, vel ullamcorper magna lorem eu leo.
    </div>
  </div>
  <div class="slanted" style="background-color:#3498db;"></div>
  <div class="slanted" style="background-color:#f39c12;"></div>
</div>

<footer></footer>

CSS

* {
  margin: 0;
  height: 0;
}

.first {
  margin-top: -45px;
}

.slanted {
/*   height: 300px; */
  -webkit-transform: skewy(-3deg);
  transform: skewy(-3deg);
  padding:75px 25px;
}

.unslant {
  -webkit-transform: skewy(3deg);
  transform: skewy(3deg);
}

footer {
  position: relative;
  margin-top: -45px;
  height: 150px;
  background-color: #bdc3c7;
}