为什么弹性项目占用更多空间

Question

flexbox出现问题。我希望它仅占用容器的10％，但仍要占用整个空间的1/3。为什么flex：10％无法正常工作？当我使用max-width：17rem时，它会产生想要的效果，但是我需要解释为什么flexbox占用这么多空间。

jsfiddle link

.container {
  width: 80%;
  margin: 0 auto;
}

.flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#footer {
  padding: 3rem 0 5rem 0;
  background-color: rgb(243, 242, 242);
  position: relative;
}

#footer .flex {
  justify-content: space-evenly;
}

#footer .flex-item {
  flex: 10%;
  /*max-width:17rem;*/
}

<div id="footer">
  <div class="container">
    <div class="flex">
      <div class="info flex-item">
        <h1>INFO</h1>
        <p>Kontakt</p>
        <p>O mně</p>
      </div>
      <div class="shop flex-item">
        <h1>SHOP</h1>
        <p>Platby</p>
        <p>Reklamace a vrácení</p>
        <p>Obchodni podmínky</p>
      </div>
      <div class="other flex-item">
        <h1>OSTATNÍ</h1>
        <p>Doprava</p>
        <p>Ochrana informací</p>
      </div>
    </div>
  </div>
</div>