将父弹性容器宽度与子弹性容器内容宽度相匹配时出现问题。
使用布尔玛,我有以下 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 容器的宽度(在这种情况下是输入的宽度)?