子div偏斜的父div的自动高度

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!