Auto height of parent div where child divs have skewed edges - html

Question

I was working on a little something for myself and I walked into a problem i simply cant solve. I am trying to achieve a small effect where there are 2 divs with skewed edges. However, their parent div gets a scrollbar because the skew falls outside.
HTML
<div class="c-r">
<div class=" c-c c-r-l-1">
</div>
<div class="c-c c-r-r-1">
</div>
</div>
CSS
.c-r{
display: block;
height: auto;
overflow: auto;
}
.c-c{
width: 50%;
height: 300px;
margin-top: 150px;
position: relative;
display: inline-block;
float: left;
background: #44bf86;
}
.c-r-l-1:before, .c-r-l-1:after {
content: '';
width: 100%;
height: inherit;
position: absolute;
background: inherit;
z-index: -1;
transition: ease all .5s;
-webkit-transform:skewY(5deg) ;
-moz-transform: skewY(5deg);
-ms-transform: skewY(5deg);
-o-transform:skewY(5deg) ;
transform:skewY(5deg) ;
}
.c-r-l-1:before {
top: 0;
z-index: 12;
transform-origin: right top;
}
.c-r-l-1:after {
bottom: 0;
z-index: 12;
transform-origin: left bottom;
}
.c-r-r-1:before, .c-r-r-1:after {
content: '';
width: 100%;
height: inherit;
position: absolute;
background: inherit;
z-index: -1;
transition: ease all .5s;
}
.c-r-r-1:before {
top: 0;
transform-origin: left top;
transform: skewY(-5deg);
}
.c-r-r-1:after {
bottom: 0;
transform-origin: right bottom;
transform: skewY(-5deg);
}
#media screen and (max-width: 720px){
.c-r{
display: block;
overflow: auto;
}
.c-c{
width: 100%;
}
}
I am not really sure what other info I can give you than this. I hope you all can help me out and thank you for taking your time.
~Greetings

Answer 1

I found the fix to my problem.
All i had to do was add:
padding-top: 5%;
padding-bottom: 5%;
The reason why it has to be 5 is because my skew is going 5 degrees!
To my outer div. everything works fine now. Thanks everyone for their time!