31:[] 2f:{"title":"CSS Grid + Flex Safari bug","cells":[{"id":0,"value":"md`# CSS Grid + Flex Safari bug\n\nSafari has a CSS Grid bug when \"\\`align-items: baseline;\\`\" badly interacts with a parent \"\\`display: flex; flex-direction: column;\\`\".\n\n__TL;DR__ The workaround is to insert a node in between that unsets the \\`flex-direction\\`.\n\nHere's the grid I want, unadorned and unparented:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"grid()","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"function grid() {\n return html`\n

\n Voluptatem explicabo fugiat aut qui et maiores qui qui praesentium. Eos eum\n nesciunt quae autem perferendis molestiae omnis aperiam. Tempora quis\n voluptate dolorem nesciunt fugit quo incidunt. Est corporis et.\n

\n Est assumenda facere repudiandae reprehenderit et minima dolores accusamus.\n Eum eius temporibus a natus quia molestiae. Sed ut fugiat et nihil. Ea\n voluptate ad omnis accusantium aliquam est aspernatur.\n

\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## Buggy behavior\nAnd here it is when a descendant of a parent with \"\\`flex-direction: column\\`\". It can be a deep descendant with many nodes in between; it'll still be buggy. Of course, to see the issue, you'll need to be _viewing this in Safari_ (or iPhone).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"html`\n

\n ${grid()}\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`## Workaround\nTo fix the situation, you'll have to wrap your grid with a node that \\`unset\\`s the \\`flex-direction\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"html`\n

\n \n

\n ${grid()}\n

\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}