Alignment was all wonky. Everythings optional. It took me AGES to find that out, so I wanna share this with other folks that might be going though the pain I have just experienced! A Computer Science portal for geeks. Tailwind CSS home page. Using safe ensures that however you do this type of positioning, you cant push an element such that it renders off-screen (e.g. Set the display property to "flex" for both elements. Wanted to spread the word, since there seems to be some confusion around this property flying around in the wake of Firefox previously not having supported it. flex-start: The cross-start margin edges of the flex items are flushed with the cross-start edge of the line. With flex-grow: 1, each one receives 1/8 of the free space on the line. Vendor prefixes arent just about syntax differences. I was beating my head against it for a good hour until I discovered that IE11 doesnt like max-width on flex items. In your second Codepen example (with the blue navigation bar), I couldnt figure out why the flow-direction: column doesnt seem to kick in at the smallest screen width. I figured out that align-content is only for the cross axis. If thats not good enough, file an issue against the CSSWG with an explanation of what youre trying to do and why this needs to work; the restriction can be lifted if theres a good reason for it to work. Only specifying widths every time is not very effective. Ive found that, in Chrome 29, and