[{"data":1,"prerenderedAt":219},["ShallowReactive",2],{"post:firefox-cant-wrap-flex-elements-in-print":3},{"id":4,"title":5,"body":6,"date":207,"description":208,"draft":209,"extension":210,"meta":211,"navigation":212,"path":213,"seo":214,"stem":215,"tags":216,"__hash__":218},"posts\u002Fposts\u002Ffirefox-cant-wrap-flex-elements-in-print.md","TIL: Firefox Can't Wrap Flex Elements In Print",{"type":7,"value":8,"toc":205},"minimark",[9,21,33,57,98,105,137,140,198,201],[10,11,12,13,20],"p",{},"Wow! This was a royal pain. See ",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fbugzilla.mozilla.org\u002Fshow_bug.cgi?id=939897",[18],"nofollow","Mozilla bug report"," for Firefox print mode.",[10,22,23,24,28,29,32],{},"The fix: Change ",[25,26,27],"code",{},"display: flex"," to ",[25,30,31],{},"display: block",". Too bad about your flexbox, but in print mode readability is more important than design and layout.",[10,34,35,36,38,39,44,45,48,49,52,53,56],{},"Luckily, almost every instance of ",[25,37,27],{}," is from ",[14,40,43],{"href":41,"rel":42},"https:\u002F\u002Ffoundation.zurb.com\u002Fsites\u002Fdocs\u002Fxy-grid.html",[18],"Foundation's new XY Grid",", so it's fairly easy to disable ",[25,46,47],{},"flex"," grids everywhere on the site by simply overriding the ",[25,50,51],{},"grid-x"," or ",[25,54,55],{},"grid-y"," classes.",[58,59,64],"pre",{"className":60,"code":61,"language":62,"meta":63,"style":63},"language-css shiki shiki-themes github-light github-dark","@media print {\n    .grid-x, .grid-y {\n        display: block;\n    }\n}\n","css","",[25,65,66,74,80,86,92],{"__ignoreMap":63},[67,68,71],"span",{"class":69,"line":70},"line",1,[67,72,73],{},"@media print {\n",[67,75,77],{"class":69,"line":76},2,[67,78,79],{},"    .grid-x, .grid-y {\n",[67,81,83],{"class":69,"line":82},3,[67,84,85],{},"        display: block;\n",[67,87,89],{"class":69,"line":88},4,[67,90,91],{},"    }\n",[67,93,95],{"class":69,"line":94},5,[67,96,97],{},"}\n",[10,99,100,101,104],{},"For a more powerful use case, we may want to disable this print helper for certain elements. Use ",[25,102,103],{},".grid-printable"," to disable this override.",[58,106,108],{"className":60,"code":107,"language":62,"meta":63,"style":63},"@media print {\n    .grid-x:not(.grid-printable),\n    .grid-y:not(.grid-printable) {\n        display: block;\n    }\n}\n",[25,109,110,114,119,124,128,132],{"__ignoreMap":63},[67,111,112],{"class":69,"line":70},[67,113,73],{},[67,115,116],{"class":69,"line":76},[67,117,118],{},"    .grid-x:not(.grid-printable),\n",[67,120,121],{"class":69,"line":82},[67,122,123],{},"    .grid-y:not(.grid-printable) {\n",[67,125,126],{"class":69,"line":88},[67,127,85],{},[67,129,130],{"class":69,"line":94},[67,131,91],{},[67,133,135],{"class":69,"line":134},6,[67,136,97],{},[10,138,139],{},"Finally, if we override the grids in print, and force grid cells to fall below each other, we should make them full width and align the text to the left just in case.",[58,141,143],{"className":60,"code":142,"language":62,"meta":63,"style":63},"@media print {\n    .grid-x:not(.grid-printable),\n    .grid-y:not(.grid-printable) {\n        display: block;\n    }\n    .grid-x:not(.grid-printable) > .cell,\n    .grid-y:not(.grid-printable) > .cell {\n        width: 100%;\n        text-align: left;\n    }\n}\n",[25,144,145,149,153,157,161,165,170,176,182,188,193],{"__ignoreMap":63},[67,146,147],{"class":69,"line":70},[67,148,73],{},[67,150,151],{"class":69,"line":76},[67,152,118],{},[67,154,155],{"class":69,"line":82},[67,156,123],{},[67,158,159],{"class":69,"line":88},[67,160,85],{},[67,162,163],{"class":69,"line":94},[67,164,91],{},[67,166,167],{"class":69,"line":134},[67,168,169],{},"    .grid-x:not(.grid-printable) > .cell,\n",[67,171,173],{"class":69,"line":172},7,[67,174,175],{},"    .grid-y:not(.grid-printable) > .cell {\n",[67,177,179],{"class":69,"line":178},8,[67,180,181],{},"        width: 100%;\n",[67,183,185],{"class":69,"line":184},9,[67,186,187],{},"        text-align: left;\n",[67,189,191],{"class":69,"line":190},10,[67,192,91],{},[67,194,196],{"class":69,"line":195},11,[67,197,97],{},[10,199,200],{},"With luck, this may eventually make it into Foundation 6.",[202,203,204],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":63,"searchDepth":76,"depth":76,"links":206},[],"2018-05-04T09:16:48-04:00","Wow! This was a royal pain. See Mozilla bug report for Firefox print mode.",false,"md",{},true,"\u002Fposts\u002Ffirefox-cant-wrap-flex-elements-in-print",{"title":5,"description":208},"posts\u002Ffirefox-cant-wrap-flex-elements-in-print",[62,217],"til","JfWiTu-wMSLQFUkff6Mtg5T-6NUdAvORk3gR2GsDZfc",1790471528197]