Угловой макет материала - проблемы с flex

Question

У меня проблема с настройкой гибких свойств моего макета. Вот 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> 

Вот ссылка на документацию: https://material.angularjs.org/#/layout/grid

Вопрос о том, что прогибается свойство ввода (текст) и ввода (кнопка) не подчиняясь гибкий атрибут ,

То, что я пытаюсь достичь что-то вроде этого:

Answer 1

вот результат после того, как я попробовал,

надеюсь, что это помогает:

<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>