1

I'm trying to layout an html input field with two buttons to the right of it in a flexbox container. The behavior I want is that the buttons are fixed width and the input field grows/shrinks to fill the remaining space. I have it working fine until the screen shrinks to a certain size at which point the input field stops shrinking and the buttons get pushed off the screen to the right. This only seems to happen for input fields and not divs.

Here's the example html that demonstrates the issue:

<div class="container">
  <input class="flexitem" placeholder="Fixed Item" />
  <div class="fixeditem">Item 1</div>
  <div class="fixeditem">Item 2</div>
</div>

and the css:

.container {
    display: flex;
    background-color: yellow;
    padding: 5px;
    margin-bottom: 10px;
}

.flexitem {
    flex: 1 1 auto;
}

.fixeditem {
    flex: 0 0 auto;
    background-color: red;
    margin: 0 2px;
}

The really strange part is that if I add a "width: 50px" to the flexitem class it works. It's like an input field has an implied minimum width.

Here's a plunkr that demonstrates the issue and "fix". plunkr

Anyone have an idea why this happens?

Jason
  • 2,455
  • 4
  • 37
  • 48
  • and `min-width:0` to input ... `It's like an input field has an implied minimum width.` ---> this is it, you got it – Temani Afif Mar 29 '18 at 20:21
  • @TemaniAfif In my debugging I actually tried min-width and it didn't work but now it does. Must not have refreshed my css when I tried it before. I guess I'm really looking for a reason why input fields work differently than everything else. Hopefully I don't have to chalk it up to browser magic. – Jason Mar 29 '18 at 20:29
  • no need to look for a reason, they work differently and they has a default width, you need to simply know it and don't look to understand why ;) – Temani Afif Mar 29 '18 at 20:31
  • As pointed out by Michael_B, this question is a duplicate of that other one. I didn't see that one in my searching. – Jason Mar 29 '18 at 20:31
  • it's not only this one, there is many duplicates :) and Michael_B was faster than me :p – Temani Afif Mar 29 '18 at 20:32
  • Yeah, it's easy to miss them if you don't search for exactly the same description. Thanks for the input (pun intended)! – Jason Mar 29 '18 at 20:33

0 Answers0