Flex container width fit content width

Question

Having issues fitting parent flex container width to a child's flex container content width.

Using Bulma, I have the following HTML structure

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

But it ends up applying to all children flex containers, as you can see here:

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

How do I fix this, and make the parent flex container fit to the width of the child flex container (in this case the width of the inputs)?

Answer 1

The container will not shrink-wrap the input elements when it has width: 640px.

Remove the fixed width.

revised codepen