How to make input inside flexbox size to available space? [duplicate]

Question

I'm trying to get the input to take all available space inside this flexbox but not extend beyond the width of the flexbox.

<div>
   <input type="number"/>
   <button>OK</button>
</div>

div
{
  display:flex;
  width:100px;
  position:relative;
  border:solid 1px #000;
}

input
{
  flex:1;
  display:block;
  border:none;
}

The problem is that the input is overflowing the containing flexbox div. If I set the input's width to 100% it seems to work in Chrome but fail in FF. How should this be done?

https://jsfiddle.net/y7d7Ldur/

Answer 1

This is because the input has a default width bigger than 100px. Add min-width:0 to the input to fix this:

div
{
  display:flex;
  width:100px;
  position:relative;
  border:solid 1px #000;
}

input
{
  flex:1;
  display:block;
  border:none;
  min-width:0;
} 

<div>
   <input type="number">
   <button>OK</button>
</div>

Answer 2

You can give the div a max-width and activate flex with width: 0; on input

div {
  display: flex;
  max-width: 100px;
  position: relative;
  border: solid 1px #000;
}

input {
  display: flex;
  flex: 1 1 auto;
  border: none;
  width: 0;
}

button {
  display: flex;
  flex: 0 0 auto;
}

<div>
  <input type="number"/>
  <button>OK</button>
</div>