Angular material layout line doesn't increase its height

I am using angular stuff and I have this problem: I have layout = "row" which does not increase its height with high content level. my code looks 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 similar happens: the problem happened
is okey in sm and xs and it is like this: okey in xs and sm