Why does an input element increase the width of a flex container?

Asked Aug 10 '19 at 03:12

Active Aug 10 '19 at 06:39

Viewed 67 times

I am using flex-box in my demo project. when I create 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>

all divs have 140 width. but when I insert input field it's width increase to 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>

why ?

here is my code https://plnkr.co/edit/PKbJ9AvvVPrnw9XxnQwv?p=preview

any update ? only140px

edited Aug 10 '19 at 06:39

asked Aug 10 '19 at 03:12

user944513

12,247
49
168
318

Because `input` elements have a default minimum width set by the browser. Add `min-width: 0` to your *flex items*. (You have it added to the `input` element only.) – Michael Benjamin Aug 10 '19 at 04:19
is it possible to `create` `constant` `width` – user944513 Aug 10 '19 at 04:21
Yes. Define the width, and set flex items to `flex-shrink: 0` so they cannot shrink. – Michael Benjamin Aug 10 '19 at 04:22
mean how to make constant width of container of 140 having `label` and `input` – user944513 Aug 10 '19 at 04:22
please share the jsbin link – user944513 Aug 10 '19 at 04:23
see not working https://plnkr.co/edit/v6PQFpZaJSidepOmfCr7?p=preview – user944513 Aug 10 '19 at 04:25
created `t` class and added in element still `160` width – user944513 Aug 10 '19 at 04:25
i need container always have 140px – user944513 Aug 10 '19 at 04:28
`.t { flex: 0 0 140px; min-width: 0 }` (apply `.t` class to flex items; remove it from `input`)...https://plnkr.co/edit/D4hHMa8BYJs7XY0cTcmg?p=preview – Michael Benjamin Aug 10 '19 at 11:45

Why does an input element increase the width of a flex container?

0 Answers0