Tailwind CSS의 첫 번째 항목 주위에 두 번째 플렉스 항목을 래핑하는 방법에 대한 가이드

Question

<p>두 개의 플렉스 항목이 포함된 플렉스 컨테이너가 있습니다. 첫 번째 플렉스 아이템은 컨테이너의 너비를 결정해야 하고, 두 번째 플렉스 아이템은 컨테이너를 둘러싸야 합니다. 스타일링에 Tailwind CSS를 사용하고 있는데 원하는 레이아웃을 얻을 수 없습니다. <br /><br />현재 코드는 다음과 같습니다.</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"> <!-- 첫 번째 자식 --> <!-- 첫 번째 자식의 내용 --> </div> <div class="bg-red-500 p-4"> <!-- 나머지 구성요소가 모두 포함됩니다 --> <!-- 나머지 구성요소의 내용 --> </div> </div> </pre> <p>첫 번째 자식의 너비를 설정하기 위해 w-2/3을 사용해 보았으나 두 번째 자식이 여전히 컨테이너에서 사용 가능한 모든 공간을 차지합니다. 두 번째 플렉스 항목이 첫 번째 항목을 감싸도록 만들고 첫 번째 항목이 컨테이너의 너비를 결정하도록 하려면 어떻게 해야 합니까? <br /><br />제공할 수 있는 도움이나 안내에 진심으로 감사드립니다! 미리 감사드립니다!

Answer 1

귀하의 문제를 완전히 이해했는지는 모르겠지만 해결책은 다음과 같습니다.

• 먼저 첫 번째 하위 div의 경우 w-56과 같은 고정 너비를 사용합니다.
• 그런 다음 상위 div에 w-fit 클래스를 추가하세요.

으아악