[TIL] 2023.10.24 - w-full 했는데 옆 div가 찌그러질 때!

 w-full 했는데 옆 div가 찌그러질 때 해결방법 

<div className="mt-4 flex w-full">

  // 1번 div : w-full 적용
  <div className="flex flex-col w-full"> 🚨
    <div className="text-sm/[22px] font-semibold">{item.title}</div>
    <div className="mt-2 text-xs/[18px] font-normal text-[#999999]">
      {item.contents}
    </div>
  </div>

  // 2번 div : 1번과 같은 행에 위치한 div
  // 1번의 w-full 때문에 2번이 찌그러지는데, 이를 방지하기 위해 2번 전체를 감싸는 <div> 추가해주기!
  <div> 🚨
    <div
      className="ml-3 w-[88px] h-[88px] bg-[#F2F2F2] rounded-lg flex items-center justify-center"
    >
      {item.postsPicturesList.length > 0 ? (
      <img
        className="w-[88px] h-[88px] rounded-lg"
        src="{item.postsPicturesList[0].postsPicturesURL}"
      />
      ) : (
      <p className=" text-4 text-black font-semibold text-center">
        대표 이미지
      </p>
      )}
    </div>
  </div>
  
</div>