Kątowa Wysokość wypełnienia karty rodzica

Question

Próbuję dowiedzieć się, jak ustawić wysokość karty md, aby wypełnić rodzica. Oto mój przykład:

<div ng-controller="AppCtrl" ng-app="MyApp"> 
    <div layout="column" layout-gt-sm="row" layout-padding="layout-padding" layout-fill="layout-fill"> 

    <div flex="flex" flex-gt-sm="33" layout="column" layout-fill="layout-fill"> 
     <div flex="flex" layout="row"> 
     <md-content flex="flex"> 
      <md-card> 
      <md-card-content><span>can I please be as high as the other two cards together</span></md-card-content> 
      </md-card> 
     </md-content> 
     </div> 
    </div> 

    <div flex="flex" flex-gt-sm="33" layout="column"> 
     <md-card flex="flex"> 
     <md-card-content> 
      <p>some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content </p> 
     </md-card-content> 
     <div layout="column" layout-gt-sm="row" class="md-actions"> 
      <md-button flex="flex" ng-click="asdf()">asdf 
      <md-tooltip>asdf</md-tooltip> 
      </md-button> 
      <md-button flex="flex" ng-click="qqqqqqqq();">qqqqqqqq 
      <md-tooltip>qqqqqqqq</md-tooltip> 
      </md-button> 
     </div> 
     </md-card> 
     <md-card flex="flex"> 
     <md-card-content> 
      <div layout="column"> 
      <p>some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content </p> 
     </md-card-content> 
     </md-card> 
    </div> 

    </div> 
</div> 

http://codepen.io/anon/pen/BNPBwJ

Czy ktoś może pomóc?

Answer 1

Jestem nowy w materiałach kątowych, więc nie mam odpowiedzi. Mogę państwu powiedzieć, że zastosowałem style = "background-color: red; padding: 5px;" do elementów i, aż do treści md, te elementy są wypełnione układem.

Zauważyłem również, że wysokość karty md jest dziedziczona z ciała i wynosi 100%.

To powiedziawszy, działa, jeśli stracisz dyrektywę zawartości md. Przykro mi, ale nie mogę wyjaśnić, dlaczego tak się stało. Mogę też użyć pomocy w zrozumieniu tego zachowania.

Answer 2

Wydaje się, że czyni go nieco ponad skomplikowane. To działa, gdy uprościć to tak:

<md-content layout="row" flex> 
    <md-card flex="33"> 
    <md-card-content><span>can I please be as high as the other two cards together</span></md-card-content> 
    </md-card> 
    ... 

zamiast

<div flex="flex" flex-gt-sm="33" layout="column" layout-fill="layout-fill"> 
    <div flex="flex" layout="row"> 
    <md-content flex="flex"> 
     <md-card> 
     <md-card-content><span>can I please be as high as the other two cards together</span></md-card-content> 
     </md-card> 
    </md-content> 
    </div> 
</div> 

W moim kodu Dodałem też klasę md-content ustawić wysokość konkretnie, a karty wypełnić przestrzeń stamtąd .