<p>J'ai un conteneur flexible contenant deux éléments flexibles. Le premier élément flexible doit déterminer la largeur du conteneur et le deuxième élément flexible doit l'entourer. J'utilise Tailwind CSS pour le style, mais je n'arrive pas à obtenir la mise en page souhaitée. <br /><br />Voici mon code actuel : </p><p><br /></p> <pre class="brush:html;toolbar:false;"><div class="flex flex-col"> <div class="flex-initial w-2/3 bg-blue-500 p-4"> <!-- Le premier enfant --> <!-- Contenu du premier enfant --> </div> <div class="bg-red-500 p-4"> <!-- Tous les autres composants l'entourent --> <!-- Contenu des autres composants --> </div> </div> ≪/pré> <p>J'ai essayé d'utiliser w-2/3 pour définir la largeur du premier enfant, mais le deuxième enfant occupe toujours tout l'espace disponible dans le conteneur. Comment dois-je faire en sorte que le deuxième élément flexible s'enroule autour du premier élément et laisser le premier élément déterminer la largeur du conteneur ? <br /><br />Merci beaucoup pour toute aide ou conseil que vous pouvez nous apporter ! Merci d'avance! </p><p><br /></p>

<div class="w-fit flex flex-col">
  <div class="flex-initial w-56 bg-blue-500 p-4"> <!-- The first child -->
    <!-- Content of the first child -->
  </div>
  <div class="bg-red-500 p-4"> <!-- All the rest components wrap around it -->
    <!-- Content of the rest components -->
  </div>
</div>