フレックスコンテナの幅にフィットするコンテンツの幅

Question

親のフレックスコンテナの幅と子供のフレックスコンテナのコンテンツ幅が適合する問題があります。ブルマを使用して

、私は、次のHTML構造

.signup-form { 
 
     display:inline-flex; 
 
     align-items: center; 
 
    }

<div class="body"> 
 
    <div class="is-active modal"> 
 
    
 
     <div class="modal-background"> 
 
     </div> 
 
    
 
     <div class="modal-card signup-form"> 
 

 
      <header class="modal-card-head has-text-centered"> 
 
      <button class="delete"></button> 
 
      <p class="modal-card-title">Title</p> 
 
      </header> 
 
    
 
      <section class="modal-card-body"> 
 
      <input class="input" placeholder="Name"/ > 
 
      <input class="input" placeholder="Phone Number"/ > 
 
      <input class="input" placeholder="Email"/ > 
 
      <input class="input" placeholder="Address"/ > 
 
      </section> 
 
    
 
      <footer class="modal-card-foot"> 
 
      <nav class="page-control level has-text-centered is-mobile"> 
 
       <a class="button is-small is-info"> 
 
       Next 
 
       </a> 
 
      </nav> 
 
      </footer> 
 
    
 
     </div> 
 
     </div> 
 
    </div>

を持っている。しかし、あなたがここに見ることができるように、それは、すべての子どもたちにフレックスコンテナをかけ終わる：

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

これを修正し、親フレックスコンテナをthの幅に合わせるe子供フレックスコンテナ（この場合は入力の幅）？

Answer 1

width: 640pxの場合、コンテナは入力要素をシュリンクラップしません。

固定幅を削除します。

revised codepen

Answer 2

あなただけ追加する必要があります。

header, 
footer{ 
    width: 100%; 
} 

は、だから、可能なすべての幅を取ります。それはあなたが望むものなのですか、何かを習っていますか？