Text input in display:flex div does not get smaller past some point, why?

Question

I can't seem to make my text input get shorter.. which is making my button seen as cut.

(I use overflow: hidden because I don't want the external div to grow.)

What am I missing here?

<div style="max-width:105px; display:flex; overflow: hidden;">
    <div class="" style="flex:1; display:flex">
       <input style="flex:2; min-width:0px" >
       <button style="flex:2; min-width:0px">
    </div>
</div>

https://jsfiddle.net/2xapnu9k/

Oriol · Accepted Answer · 2016-04-28T17:10:45.270

That's because there is a circular definition:

The size of the #inner-wrapper depends on the size of the input and the button via min-width: auto.
The sizes of the input and the button depend on the size of #inner-wrapper via flex properties.

Therefore, #inner-wrapper is sized according to the intrinsic width of the button and the input.

If you don't want that, you can break the circular definition manually:

Make #inner-wrapper ignore the sizes of its contents

#inner-wrapper {
  min-width: 0;
}

#outer-wrapper {
  max-width: 105px;
  display: flex;
  overflow: hidden;
}
#inner-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
}
input, button {
  min-width: 0;
  flex: 2;
}

<div id="outer-wrapper">
  <div id="inner-wrapper">
    <input />
    <button></button>
  </div>
</div>

Make the input and button ignore their intrinsic width.

input, button {
  width: 0;
}

#outer-wrapper {
  max-width: 105px;
  display: flex;
  overflow: hidden;
}
#inner-wrapper {
  flex: 1;
  display: flex;
}
input, button {
  width: 0;
  min-width: 0;
  flex: 2;
}

<div id="outer-wrapper">
  <div id="inner-wrapper">
    <input />
    <button></button>
  </div>
</div>

For me, using ```width: 0``` only for the input element alone did the trick for me, no ```min-width: 0``` necessary. — Christof Kälin, Oct 12 '17 at 15:22

score 1 · Answer 2 · edited May 23 '17 at 12:23

1

Consider applying the max-width to the parent (not the grand parent) of the form controls (demo).

Also note that the default minimum size of flex items is the size of their content. An alternative solution to your problem would be applying min-width:0 to your inner div (demo).

More details: https://stackoverflow.com/a/36247448/3597276

edited May 23 '17 at 12:23

Community

1
1

answered Apr 28 '16 at 13:15

Michael Benjamin

346,931
104
581
701

1

the max-width is applied to the grand parent just to show that my parent is growing. your answered helped me to realize it is the parent that is causing me trouble with min width. thanks ! – Adi Zarfaty May 01 '16 at 07:25

Text input in display:flex div does not get smaller past some point, why?

2 Answers2