Guide sur la façon d'envelopper le deuxième élément flexible autour du premier élément dans Tailwind CSS

Question

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.

Voici mon code actuel :

  
 
    
  
  
 
    
  

≪/pré>
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 ? 

Merci beaucoup pour toute aide ou conseil que vous pouvez nous apporter ! Merci d'avance! 

            

Answer 1

Je ne suis pas sûr de bien comprendre votre problème, mais voici ce que je pense être la solution :

• Tout d'abord, pour le premier div enfant, utilisez une largeur fixe, comme w-56.
• Ensuite, ajoutez une classe w-fit au div parent.

<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>