Responsive Product Page using Flexbox mobile first approach

There was really only one point that gave me confusion in this project. When switching to desktop view, my flexbox container changed from column to row as expected. However, I had to restrict the heights for both elements instead of setting the height for the flexbox container. Setting the height for the flexbox container didn't seem to do anything and I don't know why.

@media (min-width: 700px) {

    .wrapper {
        flex-direction: row;
        max-width: 37.5rem;
        align-items: center;
    }

    .img-pane {
        flex-basis: 50%;
        height: 28.125rem;
    }

    .right-pane {
        flex-basis: 50%;
        height: 28.125rem;
        border-radius: 0 0.625rem 0.625rem 0;
    }

writing height: 28.125rem in .wrapper did nothing and because the wrapper was oversized, i had to use align-items: center to center the children.