0

Trying to figure out why this flex container doesnt grow wider to hold its contents. in this case, why are the cats falling out of the box instead of the icon-div? even more inexplicable to me is that if I shorten the text so that everything is smaller than the parent div, the icon-div still does not exand as you can see by the borders. 

.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>
Bastiat
  • 657
  • 1
  • 6
  • 18
  • 1
    in addition to the duplicate you may notice that you are using block element thus you will always have overflow since it shouldn't exceed width:100% – Temani Afif Feb 11 '19 at 22:08
  • @TemaniAfif unfortunately for me, neither google or the stack overflow search pulled your linked issue up for me, thanks for pointing it out. also as I mentioned, you can shrink the text and it still shows the issue as seen in said link. The workaround does work. – Bastiat Feb 11 '19 at 22:16

0 Answers0