SCSS Height Property will not Convert to CSS

Question

I am creating a simple website, using Ruby SCSS to CSS, and have run into one of those head-slam-wall moments. My article element needs a height: 100%; value in order to have a scrollbar. I can add this into the .css or Chrome dev tools just fine and voila, it's fixed.

The problem, though, is that whenever I save and SCSS compiles to CSS, it purposefully excludes the height: 100%;, as if to mock me. I'd prefer to not have to go to the CSS and add the line back each time I compile my SCSS -- does anyone know this bug or have a hint as to what tools I could use to find out what this stems from?

The SCSS in Question:

.modalElement {
    position: relative;

    @mixin articleExpand {
        height: 100%;
        top: 0%;
        border-radius: 0;
        width: 100%;

        header {
            height: 20%;
            overflow: auto;
        } 

        .articleContent {
            height: 80%;
        }
    }
    ... (more unrelated SCSS)
}
...
&.articleExpanded {
    &.modalElementArticle article {
        @include articleExpand;
    } 
}

The Generated CSS in Question:

.modalElement.articleExpanded.modalElementArticle article {
  top: 0%;
  border-radius: 0;
  width: 100%;
}

The (Simplified) HTML:

<figure class="modalElement modalElementArticle flipper articleCard articleExpanded">
            <div class="flipperContainer">
                <div class="flipperFront">
                <button class="modalElementMain flipperFrontContent imgCenteredContainer modalGroup">

                    <article>
                        <header>
                            <h2 class="">Flower</h2>
                            <h3 class="">Why do we love flowers...</h3>
                        </header>
                        <div class="articleContent"> <div class="breakClear"></div></div>
                        <div class="articleMarkdown hide"></div>
                    </article>
                </button>
                </div>
                <div class="flipperBack">

                </div>
            </div>
        </figure>

Answer 1

Get the mixin out of class

.modalElement {
    position: relative;

    ... (more unrelated SCSS)
}

@mixin articleExpand {
    height: 100%;
    top: 0%;
    border-radius: 0;
    width: 100%;

    header {
        height: 20%;
        overflow: auto;
    } 

    .articleContent {
        height: 80%;
    }
}

...
&.articleExpanded {
    &.modalElementArticle article {
        @include articleExpand;
    } 
}