1

 <flex1 style="width: 400px; padding: 5px; background-color: #333; display: flex; flex-direction: column; flex-wrap: wrap;">
    <item style="background-color: #999;">
        <flex2 style="display: flex; flex-wrap: wrap; padding: 7px;">
            <one style="background-color: #ccc; padding: 5px; flex-basis: 50%; margin-right:3px;">One</one>
            <two style="background-color: #ccc; padding: 5px;">Two</two>
        </flex2>
    </item>
</flex1>

I expect that flex1 will wrap around flex2

Seems like flex2 has an invisible wrap. But if you remove flex: wrap from flex1 then that wrap will disappear. Really strange behaviour that is implemented in all browsers.

dogonaroof
  • 69
  • 13
Vladimir
  • 11
  • 5
  • 1
    seems another bug due to nesting – Temani Afif Aug 02 '18 at 09:04
  • Try my code, posted below. – VSM Aug 02 '18 at 10:26
  • In short, when using a single-line flex container, you should use `nowrap`. [This answer could help](https://stackoverflow.com/questions/40890613/remove-space-gaps-between-multiple-lines-of-flex-items-when-they-wrap#answer-40890703) – Ron van der Heijden Aug 02 '18 at 11:48
  • Lots of browsers bugs with flex `column wrap`. See [**here**](https://stackoverflow.com/q/39095473/3597276), [**here**](https://stackoverflow.com/q/33891709/3597276), [**here**](https://stackoverflow.com/q/39617628/3597276) and [**here**](https://stackoverflow.com/q/42451219/3597276). – Michael Benjamin Aug 02 '18 at 12:59

0 Answers0