How to make input inside flexbox size to available space?

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>

Answer 3

You dont need to make it a flex box.

you can just do this:

<div>
<input></input>
</div>

<style>
div{
width: 100px;
}
input{
min-width:100%;
margin: 0px;
}
</style>