Flex Row last item Wraps to next line on Safari

[a_tec]

Hi,

I’ve created a content page that contains a section with 1 row that has 5 columns. These columns need to wrap on smaller display sizes to display properly. So I’ve added some CSS to the row to acomplish just that (found it on the forum). I’t works on all browsers exept for Safari, on Safari the last item wraps to the next line.

$el{
  display:flex;
  align-items: center;
  flex-wrap: wrap;
}

Result in Safari:

Does anyone know how to fix it on Safari?

Thanks!

[rad]

Hi @a-tec,

Thanks for reaching out.

Please try this one,

$el{
  display:flex;
  align-items: center;
  flex-wrap: wrap;
}
$el > .x-container {
flex: 0 1 100%;
flex-direction: row;
justify-content: space-between;
}

The display:flex; isn’t enough, the items within it should follow the actual flex layout flex: 0 1 100%;.

Thanks!

[a_tec]

I’ve tried your suggestion but it didn’t work. After some debugging I got it to work by removing display:flex;

$el{
  align-items: center;
  flex-wrap: wrap;
}

Thanks!

[rad]

Glad it’s okay now, it’s the same reason flex isn’t used within the content layout. It may behave differently. Cheers!