使用wrap和100％宽度项时，Flexbox容器太大

Question

我试图为某些商品制作Flexbox容器。 内部有一个100％宽度的项目作为标题。

容器比需要的更大（宽度）..为什么？

以下是代码：

＆＃13;

＆＃13;

.flex_container {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid blue;
}

.flex_head {
  width: 100%;
  padding: 10px;
  background-color: blue;
  font-size: 14px;
}

.flex_item {
  width: 175px;
  margin: 9px;
  border: 10px solid red;
  background-color: red;
}

＆＃13;

<div class="flex_container">
  <div class="flex_head">Flex Head</div>
  <div class="flex_item">Item</div>
  <div class="flex_item">Item</div>
  <div class="flex_item">Item</div>
  <div class="flex_item">Item</div>
<div>

＆＃13;

＆＃13;

＆＃13;

Demo on jsfiddle