Hi, I'm trying to use nested elements with static-flow, but for some reason it isn't behaving as I would expect.

@page {
  @top-left{
    content: flow(header);
  }
}

.header {
  prince-flow: static(header);
}

<div class="header">
  <p>Long content that will wrap</p>
  <dl>
    <dt>An item:</dt>
    <dd>with content</dd>
  </dl>
</div>

Only the first line of text content in .header shows (after wrapping is applied), and none of the child elements render at all. Setting explicit height and width doesn't help (and using a background colour proves that the dimensions are being respected). Is there something I'm doing incorrectly, or have I misunderstood the way this feature is intended to work? Thanks.

You may need to increase @page margin-top.

Thanks for the quick reply Mike. Unfortunately that didn't seem to help. I've attached a minimal test case here. The red and green borders show that the content box is not being clipped, but as you can see only the first child element of .slug is visible here.

Prince version 20150210

1. slug.html‎ 0.9 kB ‎
   Testcase 1

The @page margin is still 0, and it is the page margin that determines available space for the margin boxes.

I'd tried that to no avail, so didn't include it in the testcase. Here's a screenshot with the @page margin set to 50mm; as you can see it moves the elements as expected but still only shows the first p in .slug

1. Screen Shot 2015-04-17 at 12.32.50 pm.png‎ 48.7 kB

Try removing the "height: 100mm" from the .slug div.

Removed height: 100mm from .slug:

1. Screen Shot 2015-04-17 at 12.38.56 pm.png‎ 38.0 kB

...and the height and margin properties from the @top-left.

Now all the content should display, but it's not where you want it?

Yep, content now displays thanks. Now to nudge it over, let's see what I can do...

You could try @top-left-corner, or @left-top?