Why input tag flex doesn't work？Overflow layout instead of evenly sizing?

Question

Why is the input overflowing? Allocate space not equally

I want an input width of 300 / 4 px (Ignore the border )

<div style="display: flex; width: 300px; background: red; padding: 5px;">
  <input style="flex: 1;">
  <input style="flex: 1;">
  <input style="flex: 1;">
  <input style="flex: 1;">
</div>

If you are talking about the border, it is because you have set a width of 300px. Other than that, typing characters in the input field doesn't seem to overflow. — tomerpacific, Jan 31 '20 at 04:28

score 1 · Accepted Answer · answered Jan 31 '20 at 04:45

Input has its default min-width which is auto so that reason only flex not able to resize it.

so you have to overwrite it with min-width:0.

input {
  min-width: 0;
}

<div style="display: flex; width: 300px; background: red; padding: 5px;">
  <input style="flex: 1;">
  <input style="flex: 1;">
  <input style="flex: 1;">
  <input style="flex: 1;">
</div>

score 0 · Answer 2 · answered Jan 31 '20 at 04:35

0

ok, But don't know why

<div style="display: flex; width: 300px; background: red; padding: 5px;">
  <input style="flex: 1; width:0;">
  <input style="flex: 1; width:0;">
  <input style="flex: 1; width:0;">
  <input style="flex: 1; width:0;">
</div>

answered Jan 31 '20 at 04:35

ebyte

1,469
2
17
32

1

Doesn't work on FF – Kaiido Jan 31 '20 at 04:49

Why input tag flex doesn't work？Overflow layout instead of evenly sizing?

2 Answers2