Amp-carousel (slides type) sets on overflow hidden even when layout responsive is set to the component

Question

I am having an issue relating to the amp-carousel. Each carousel slide will have a different height based on the content that is relating to the product.

I have set my carousel to have layout responsive and set a height like so:

<amp-carousel width="367" height="635" layout="responsive" class="o-wrapper fabric-gallery" type="slides" controls loop>

I am assuming using layout responsive will set the height to auto.

Would using something like flex-item be more appropriate?

Answer 1

Yes you can use flex-item since it will take the available space based on the flexbox model.

Notice that height=100% and width=100% are overridable defaults and are only there to ensure that the container indeed specifies display: flex. Alternatively, the element can force display: flex on the parent.

The flex-item it ensures that the element is not sporadically resized while also giving it a more flexible positioning options. It'd also allow the element to participate in the flexbox layouts.

Check this example on how to implement it in your page.