#2210·WeasyPrint

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.

xml
<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.