2

将父弹性容器宽度与子弹性容器内容宽度相匹配时出现问题。

使用布尔玛，我有以下 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>

但它最终适用于所有子 flex 容器，如您在此处看到的：

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

我该如何解决这个问题，并使父 flex 容器适合子 flex 容器的宽度（在这种情况下是输入的宽度）？

4

2 回答 2

1

当容器具有width: 640px.

移除固定宽度。

修改后的密码笔

于 2017-03-16T20:58:32.553 回答
-2

您只需要添加：

header,
footer{
  width: 100%;
}

所以它需要所有可用的宽度。这是你想要的还是我错过了什么？

于 2017-03-16T20:50:30.843 回答