angular material layout row doesn't increase its height

i am using angular material and i have this issue : i have layout="row" that doesn't increase its height with content that is tall . my code is like this :

<di layout="column">
<div layout-gt-sm="row" layout="column" layout-padding="" ng-hide="!selectedEvent">
    <div flex-gt-sm="30" layout="column" layout-padding="">

        <!-- some content goest here-->
        <!-- here is the same . when content height is going to be big the layout refuse to change its height-->

    </div>

    <div flex-gt-sm="70" layout-padding="" layout="column">
    <!-- i have a simple card here and its height is big . but this layout refuse to change its height -->
        <md-card dir="rtl" class="persian-rtl vazir-font" layout="column">
            <img ng-src="{{ selectedEvent.MainPic }}" class="md-card-image" alt="Washed Out">
            <!-- other card content goes here -->
        </md-card>
    </div>
</div>

something like this happen : problem happend
it is okey in sm and xs and it is like this : okey in xs and sm