Why isn't Velocity displaying 's that should be displayed as "display: flex;" correctly?

Question

I have problem with Apache Velocity engine.

I have a piece of html in my template:

<p>
    <span><b>${contextString}: ${context.contextTitle}</b></span>
    <div style="display: flex;">
        <div>${published}</div>
        <div>${context.published}</div>
        <div>${noWorkflow}</div>
        <div>${context.reviewed}</div>
    </div>
</p>

But when I test this template, Velocity seems to somehow convert those DIVs into regular display: block; or is ignoring display: flex; completely, displaying all items in new lines.

Why is Velocity displaying this incorrectly? Is there any way to fix this?

Answer 1

This is not a Velocity problem: outside of $references and #directives, Velocity does not interpret the text it is formatting, would it be HTML or else.

There is at least one HTML problem in your code that may cause this: <p> tags cannot contain <div> tags, so the <p> is closed when it encounters the first <div>. See this related answer.