Bootstrap 5 Carrousel width getting doubled in flexbox ancestor

Question

Je rencontre le problème que avec le Carousel de Bootstrap 5 à l'intérieur d'un Flexbox, il double en largeur (et pousse les autres éléments flexibles sur le côté) lors du changement d'images. Cela se produit également lorsque le conteneur direct est défini sur display:block mais qu'un ancêtre est en flex.

Voici mon code (le carousel est copié depuis https://getbootstrap.com/docs/5.0/components/carousel/)

Le CSS:

#midbody {
    margin: 20px auto;
    width: $screen_width;
    height: auto;
    flex: 1 0 auto;
    display: flex;
}

.carousel-container {
    display: block;
}

J'ai essayé:

• de définir overflow sur hidden comme suggéré ici Bootstrap carousel: images out of div when sliding
• de changer le conteneur du carousel en: flex: 0 1 auto;

Je n'ai vraiment trouvé aucun doublon de la question, donc j'espère que vous pourrez m'aider avec cela.

Answer 1

Il se peut que ce ne soit pas la meilleure façon de faire avec Bootstrap, mais en enlevant la classe slide, l'effet semble être annulé. Le problème doit venir de l'animation. Vous devriez probablement créer une transition personnalisée.

Dans l'extrait ci-dessous, j'ai simplement supprimé slide:

#midbody {
  margin: 20px auto;
  width: $screen_width;
  height: auto;
  flex: 1 0 auto;
  display: flex;
}

.carousel-container {
  display: block;
}

            Placeholder
            First slide

            Placeholder
            Second slide

            Placeholder
            Third slide

        Précédent

        Suivant

      quelque chose