플렉스 컨테이너 너비에 맞는 내용 너비

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

어떻게 수정해야하며 부모 플렉스 컨테이너를 너비의 너비에 맞 춥니 다. e 하위 플렉스 컨테이너 (이 경우 입력의 너비)?

header, 
footer{ 
    width: 100%; 
} 

그래서이 모든 폭이 가능합니다 :

Answer 1

width: 640px 인 경우 컨테이너는 입력 요소를 축소 포장하지 않습니다.

고정 폭을 제거하십시오.

revised codepen

Answer 2

당신은 추가해야합니다. 그게 니가 원했던거야, 내가 뭔가를 만들고있어?