Support "display: contents"
Author: nbanyanCreated Jul 25, 2024Updated Sep 4, 2026
Labelsfeature
I'm using Material for MkDocs with PyMdown Extensions and mkdocs-with-pdf. PyMdown has a tabbed content feature. This is a simplified example of the structure of the tabbed content with minimal CSS for print.
<div style="display: flex; flex-flow: column wrap">
<div style="display:contents">
<label style="order: 1;">Tab 1</label>
<label style="order: 2;">Tab 2</label>
</div>
<div style="display: contents">
<div style="order: 1; display block; ">
Content Block 1
</div>
<div style="order: 2; display block; ">
Content Block 2
</div>
</div>
</div>In the browser this is displayed as:
Tab 1 Content Block 1 Tab 2 Content Block 2
Weasyprint renders this as:
Tab 1 Tab 2 Content Block 1 Content Block 2
Even placing all the 'order' elements directly under the 'display: flex' element gives the same result.
I proposed a workaround to PyMdown, but this should be resolved here.
Source: Kozea/WeasyPrint