霓虹动画页面伸展以适应内容

Question

如何让霓虹动画页面拉伸宽度和高度以适应其内容，而不设置静态宽度和高度。对于下面的代码，我希望红色框位于绿色框的中心，但如果我查看chrome中的元素，看起来霓虹动画页面根本没有任何宽度。

<div style="display: flex; background: green; padding: 20px">
            <neon-animated-pages selected="0">
                <neon-animatable>
                    <div style="background: red; width: 300px">Test</div>
                </neon-animatable>
                <neon-animatable>
                    <div style="background: blue">Test</div>
                </neon-animatable>
            </neon-animated-pages>
 </div>