为什么输入元素会增加弹性容器的宽度?

时间:2019-08-10 03:12:01

标签: javascript html css flexbox

我在演示项目中使用flex-box。当我创建flex-container时。

<div class="container">
      <div class="flex">
<div class="form-control flex-1 flex align-item-baseline"> </div>
<div class="form-control flex-1 flex align-item-baseline"></div>
<div class="form-control flex-1 flex align-item-baseline"></div>
<div class="form-control flex-1 flex align-item-baseline"></div>
<div class="form-control flex-1 flex align-item-baseline"></div>

      </div>
  </div>

所有divs具有140 宽度。 但是当我插入input field时,宽度增加到160

<div class="container">
      <div class="flex">
        <div class="form-control flex-1 flex align-item-baseline">
            <label class="color-red">Passport Number</label>
            <input type="text" class="min-width-0 flex-1">
        </div>
<div class="form-control flex-1 flex align-item-baseline"></div>
<div class="form-control flex-1 flex align-item-baseline"></div>
<div class="form-control flex-1 flex align-item-baseline"></div>
<div class="form-control flex-1 flex align-item-baseline"></div>

      </div>
  </div>

为什么?

这是我的代码 https://plnkr.co/edit/PKbJ9AvvVPrnw9XxnQwv?p=preview

有任何更新吗?只有140px

0 个答案:

没有答案