flexbox宽度无法通过包裹的列进行调整

Question

试图弄清楚为什么这个flex容器不能变宽以容纳其内容。在这种情况下，为什么猫掉下来而不是icon-div？对我来说更莫名其妙的是，如果我缩短文本以使所有内容都小于父div，那么图标div仍然不会像边框所示那样扩展。

.flex-container{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
}

.flex-container * {
  border: 1px solid black;
}

.icon-div{
  display:flex;
  flex-direction: column;
  justify-content:center;
  flex-wrap: wrap;
  height: 250px;
}

img{
  margin:1em;
}

<div class='flex-container'>
  <div class='text-div'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</div>
  <div class='icon-div'>
    <img src='https://placekitten.com/36/36'/>
    <img src='https://placekitten.com/36/36'/>
    <img src='https://placekitten.com/36/36'/>
    <img src='https://placekitten.com/36/36'/>
    <img src='https://placekitten.com/36/36'/>
    <img src='https://placekitten.com/36/36'/>
    <img src='https://placekitten.com/36/36'/>
    <img src='https://placekitten.com/36/36'/>
  </div>
</div>