AMP HTML: amp-render is rendering content at zero height - css

Question

I hope someone may be able to enlighten me on the following.
I have some experience with mostly static AMP (Accelerated Mobile Pages) for websites, but am currently working on a fairly complex page layout that pulls in some extra data based on the user's level of authorisation.
Specifically, I'm building an HTML5 description list (<dl>, <dt>, <dd>) that is of varying length depending on the attributes being present (or not) on the entity the page represents. I am then using amp-render to pull in additional dt/dd pairs (or not) from a dynamic API endpoint, depending on the current user's level of authorisation within the application.
Technically this is working completely as expected, but I cannot figure out the correct layout/CSS to render the resulting DOM elements to the page: they're in an AMP-generated div that has a CSS-forced height: 0 so invisble.
My raw page looks something like this:
<amp-render
src="/api/data-source/1234"
credentials="include"
xssi-prefix=")]}\*"
layout="flex-item">
<template type="amp-mustache">
<dl>
<dt>1st item</dt>
<dd>Definition</dd>
<dt>2nd item</dt>
<dd>Definition</dd>
{{#isAuthorised}}
<dt>3rd item</dt>
<dd>
<ul>
{{#array}}
<li>{{name}}</li>
{{/array}}
</ul>
</dd>
{{/isAuthorised}}
</dl>
</template>
</amp-render>
To clarify: the API, JSON, and Mustache template are all working as expected, with the correct HTML returned by the AMP framework.
The problem is that the <dl> is immediately contained by the following:
.i-amphtml-blurry-placeholder, .i-amphtml-fill-content {
display: block;
height: 0;
max-height: 100%;
max-width: 100%;
min-height: 100%;
min-width: 100%;
width: 0;
margin: auto;
}
<div i-amphtml-rendered="true" class="i-amphtml-fill-content" loading="auto" aria-live="polite"> ... </div>
Given that the i-amphtml-* classes are illegal to style with custom CSS, this is where I've come unstuck. No variation of layouts on amp-render, nor other containing elements and CSS, are generating the expected result of the definition list actually being visible on the page.
If I wrap amp-render itself in a div with a specified height then the rendered definition list shows as expected - but there's no way to know what height the dl should be, so this isn't a solution for anything more than sanity checking.
Can anyone help?
Surely this is not impossible to achieve? I understand one of the core aims of AMP is to minimise (if not eliminate) page jump as items render in the browser, but surely returning data of variable length is not an uncommon occurrence and there is a way to do what I'm attempting? Or have I missed something incredibly obvious?
(To pre-empty any questions about other styles: I've also tried stripping out all other CSS from the page and there is no difference in what I've managed to display.)

Answer 1

We had similar problems with amp-list. The same approach may work for amp-render. Separate amp-render and template and link with an ID (see the amp doc for an example). Move render to page bottom (before </body>). Add a minimal height value to render. Set width to auto. When we use this approach for list, the list length will be set to the actual length (as determined by amp runtime). This approach may work for render. Note: you cannot control i-amphtml-* so don't look for override solutions there (and your page may be invalid if you do try to override).