Flex无法与div中排列的输入一起使用

Question

链接：https://www.w3schools.com/code/tryit.asp?filename=FZXNU3HGKKE8

代码：

<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>

为什么输入超出了div？