0

I don't know what silliness I've got myself into but I'm stuck in a common flexbox issue..

Here's a pen.. https://codepen.io/webdev51/pen/zYPWwbd

What I'm trying to achieve is the parent flex div to be adapting the width when flex item go into 2nd row using flex-wrap.

Desired/expected result:

enter image description here

Results I get:

enter image description here

And here's the most important part that is driving me nuts.

If I replicate the same in flex-direction: row; , it'll be working as expected and whenever the items drop in the next row, the container will adapt the height accordingly.

Muhammad Osama
  • 985
  • 8
  • 17
  • can you show the code? – Sunderam Dubey Feb 20 '22 at 10:49
  • @Sunderam I've already shared the pen – Muhammad Osama Feb 20 '22 at 10:50
  • This seems to be known strange behaviour of Flex and I see this question has passed multiple times. Below topic bundles multiple examples and workarounds: https://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width There are some possible workarounds in there you might want to have a look at. – MC-SO Feb 20 '22 at 11:13

1 Answers1

-1

after changing display: inline-flex to display: flex, add align-content: flex-start;

.spaceship-group{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 90vh;
    align-content: flex-start;
    justify-content: center;
    position: relative;
    border:2px solid orange;
}

    .spaceship {
      height: 240px;
      width: 290px;
      position: relative;
      border:1px solid blue;
    }
<div class="spaceship-group">
  <div class="spaceship"></div>
  <div class="spaceship"></div>
  <div class="spaceship"></div>
  <div class="spaceship"></div>
  <div class="spaceship"></div>
</div>
Aimsat
  • 338
  • 4
  • 10