[Help]: set unknown height value on container use autoHeight with single children

[ParkDyel]

Summary

When there is only one child, the container height is defined as 22px. (The height including the child's image is approximately 109px.)

I'm not very good at English, so I used Google Translate for help.

Related information

• When there is only one child, if you do not add the autoHeight plugin to the argument of useEmblaCarousel, it will be rendered normally.
• If there is a modification to the code in React development mode and it is updated, it will be rendered normally.
• When there are multiple children, it seems that the height is set properly even if authHeight is used.

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

I'm sharing the code in case I'm using the library wrong.
If there's no problem with the library usage, I'll look into it a little more.
Unfortunately, I can't access the sandbox in my current environment.

const Wrap = styled.div<{
  marginInline?: string;
}>`
  position: relative;
  margin-inline: ${({ marginInline }) => marginInline};
`;

const Embla = styled.div`
  overflow: hidden;
`;

const EmblaContainer = styled.ul`
  display: flex;
  transition: height 0.3s ease;
  align-items: flex-start; /* autoHeight */

  list-style: none;
`;

interface ICarouselProps extends EmblaOptionsType {
  children: ReactNode;
  single?: boolean;
  containerMarginInline?: string;
  paging?: TPaging;
}
function Carousel({
  children,
  paging,
  single,
  containerMarginInline,
  ...swiperOptions
}: ICarouselProps) {
  const plugin: EmblaPluginType[] = [Autoplay()];

  if (!single) {
    plugin.push(AutoHeight());
  }

  const [emblaRef, emblaApi] = useEmblaCarousel(
    { loop: true, watchSlides: true, ...swiperOptions },
    plugin,
  );

  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
  const totalSlideCount = useMemo(() => Children.count(children), [children]);

  const hasPaging = useMemo(() => {
    if (typeof paging === 'object') return paging.has !== false;
    return !paging;
  }, [paging]);

  useEffect(() => {
    if (!emblaApi) return;

    const handlePointUp = (api: EmblaCarouselType) => {
      setCurrentSlideIndex(api.selectedScrollSnap());
    };

    emblaApi.on('pointerUp', handlePointUp);

    return () => {
      emblaApi.off('pointerUp', handlePointUp);
    };
  }, [emblaApi]);

  return (
    <Wrap marginInline={containerMarginInline}>
      {paging && hasPaging && (
        <Paging
          current={currentSlideIndex}
          paging={paging}
          total={totalSlideCount}
        />
      )}
      <Embla ref={emblaRef}>
        <EmblaContainer>{children}</EmblaContainer>
      </Embla>
    </Wrap>
  );
}

const CarouselItem = styled.div<{ itemPaddingInline?: string }>`
  flex: 0 0 100%;
  min-width: 0;

  padding-inline: ${({ itemPaddingInline }) => itemPaddingInline};
`;

Carousel.CarouselItem = CarouselItem;

export { CarouselItem };
export default Carousel;

### CodeSandbox example

_No response_