Bố cục tài liệu góc - vấn đề với flex

Question

Tôi gặp sự cố khi đặt thuộc tính flex của bố cục. Đây là một plunker: http://embed.plnkr.co/0SrUp25FvT2PAsJDEwF3/preview

<md-content flex layout="row" layout-align="center"> 
    <div layout="column"> 
     <div flex layout="column" layout-fill> 
     <div flex="33"> 
      <md-input-container> 
      <label>Enter Room's Name</label> 
      <input ng-model="test" placeholder="Enter Room's Name"> 
      </md-input-container> 
     </div> 
     <div flex="66"> 
      <md-button class="md-raised md-accent"> 
      Create Chat Room 
      </md-button> 
     </div> 
     </div> 
    </div> 
    </md-content> 

Đây là liên kết đến tài liệu: https://material.angularjs.org/#/layout/grid

Các vấn đề mà các tài sản flex của đầu vào (văn bản) và đầu vào (nút) không tuân theo thuộc tính flex .

Những gì tôi đang cố gắng để đạt được là một cái gì đó như thế:

Answer 1

đây là kết quả sau khi tôi đã thử nó,

hy vọng nó giúp:

<md-content layout="row" layout-align="center"> 
    <div layout="column"> 
    <div flex layout="column" layout-fill> <!-- this is what I change --> 
     <div flex="33"> 
     <md-input-container> 
      <label>Enter Room's Name</label> 
      <input ng-model="test" placeholder="Enter Room's Name"> 
     </md-input-container> 
     </div> 
     <div flex="66"> 
     <md-button class="md-raised md-accent"> 
      Create Chat Room 
     </md-button> 
     </div> 
    </div> 
    </div> 

</md-content>