Flex not working with inputs lined up within div

Question

Link: https://www.w3schools.com/code/tryit.asp?filename=FZXNU3HGKKE8

Code:

<style> 
#main {
  width: 300px;
  height: 30px;
  border: 1px solid black;
  display: -webkit-flex; /* Safari */
  display: flex;
}

#main input {
  -webkit-flex: 1;  /* Safari 6.1+ */
  -ms-flex: 1;  /* IE 10 */  
  flex: 1;
}
</style>

<div id="main">
    <input placeholder="statement" />
    <input placeholder="heckno" />
    <input placeholder="neutral" />
    <input placeholder="yes" />
    <input placeholder="heckyes" />
</div>

Why are the inputs extending beyond the div?