If you’re trying out Google AMP, chances are you’ll want to add a carousel to your site. The good news is they are pretty easy to do. The bad news is that you can’t create flexible height carousels.

Google AMP is a great idea, but the more you use it, the more you realize it has some weird limitations. Flexible height carousels are one of them. Someone over at Google probably thinks of carousels as usually only images. In that scenario, forcing them all to the same size makes sense. However, if your carousel includes captions of varying length on each slide, then you run into a big issue.

The way Google wants you to get around this issue is with flexible text. AMP will then increase or decrease the size of the text to fit the space available. However, it looks terrible. The font is either huge or tiny or the spacing is off. Overall, the text just looks inconstant. Good idea, not such a great solution.

The way I worked around this was to put a fixed height div around my caption and then setting that div to scroll vertically if needed. This solution brings constancy in font sizes back to the captions, but it does introduce a new issue of scrolling content on a page that scrolls; especially when mobile devices don’t show scrollbars.

You can see the issues and solutions over on CodePen.

I don’t know what the right solution is. I really wish AMP carousels would grow and shrink as needed, but that’s not currently part of the AMP platform.

Maybe I’m missing something? Has someone figured this out?