I am trying to populate the top-center margin with the contents of a div in my HTML. This works fine when there is enough room on the top-center area for one line of text, however when the text is too long and needs to go onto two lines of text, the second line disappears.

Attached is what it looks like before I set it to be a flow, and after I set it to be a flow.

Here is the relevant CSS:

	div.heading {
		page-break-before: always;
		width: 80%;
		flow: static(heading);
		float:right;
		font-family: CalvertMT;
		vertical-align: middle;
		overflow: visible;
		height: 3cm;
		text-align: left;
		color: #1c1b5e;
		border: 3pt solid #aeb0d9;
		font-size: 24pt;
		line-height: 20pt;
		display: block;
	}

	@page standard {
		@top-right{
			font-size: 10pt;
			font-family: Helvetica;
			content: counter(page)
		}

		@top-center {
			margin-top: 3cm;
			width: 83%;
			content: flow(heading);
		}

		@bottom-center {
			content: flow(footer);
			width: 100%;
			height: 200pt;
			margin-bottom: 60pt;
		}
		@bottom-right {
			content: normal;
		}
	}

And the relevant HTML:

        <div class="row section standard">
            <div class="heading">This is a test title that will go on to two lines</div>
            <h2 class="section">B</h2>
         </div>

1. Screen Shot 2015-03-26 at 15.21.41.png‎ 14.3 kB ‎
   without flow: static(heading)
2. Screen Shot 2015-03-26 at 15.29.06.png‎ 12.6 kB ‎
   with flow: static(heading) set

You may need to increase the margin-top in the @page rule, eg.

@page {
    margin-top: 25mm
}