1

I have a widget that is composed of three subcomponents:

<div class="container">
  <div class="fixed-width"></div>
  <div class="flex-width"></div>
  <div class="fixed-width"></div>
<div>

And I want the middle component to stretch or shrink based on the width of the container. For this I use flexbox:

.container {
  display: flex;
  align-items: center;
}
.fixed-width {
  flex: 0 0 48px;
}
.flex-width {
  flex: 1 1 auto;
}

This works fine when the middle component is a <div>. But when I change the middle component to an <input> element, the <input> element refuses to shrink to smaller than 173px for some reason.

I can fix it by putting the <input> in its own container, and give the input width: 100%, but I don't like creating extra DOM-elements for styling only, and I am curious why the <input> does not obey my flexbox settings.

What is preventing my <input> from obeying its css flexbox instructions? Or is this a known 'bug' in css?

It looks like this:

Screenshot of problematic flexbox sizing

And here is a codepen that demonstrates the isue:

wintvelt
  • 13,855
  • 3
  • 38
  • 43
  • 3
    A flex item, by default, cannot be smaller than the length of its content. Just add `min-width: 0` to `input` (`.flex-width`) [revised pen](http://codepen.io/anon/pen/GqVgoW?editors=1100). – Michael Benjamin Aug 26 '16 at 16:03
  • Thanks! that fixed it. I did not know of any (and did not find info on) default min-width for input elements. Feel free to post is as answer and I'll be happy to check it for rep. – wintvelt Aug 26 '16 at 16:10
  • Yeah, the more interesting question (for me in this case) is *what is the default width of an input type=text element?* .. It's 173px in Chrome, but its 143px in FF, and 153px in Edge. So clearly it's at the browsers discretion. – Michael Benjamin Aug 26 '16 at 16:13
  • 1
    Noticed that too. Looking at the duplicate flag I guess my Q is already answered. Apparently I used the wrong keywords. Will vote over there. Thanks again! – wintvelt Aug 26 '16 at 16:15
  • Here is a plunkr that shows the min-width fix: https://plnkr.co/edit/Lzbdclb31AVuth4riRTU?p=preview – Matthias Oct 07 '16 at 18:36

0 Answers0