flex 안에서의 말줄임(ellipsis)

<div className="flex">
        <div className={`${imagebox}`}></div>
        <div className={`pl-4 pr-4 flex-1 overflow-hidden whitespace-nowrap`}>
          <p className={`overflow-hidden overflow-ellipsis`}>모짜렐라인더버거 어쩌구저쩌구 길면어쩌지</p>
          <p className="text-sm">리뷰 작성 기간 <span className="bold text-yopink">15시간 남음</span></p>
        </div>
        <Link href="/">
          <p className={`${whiteButton}`}>리뷰쓰기</p>
        </Link>
      </div>

0 000000 0 이런 형태의 div 3개가 있고 부모 요소에서 flex 속성을,
양쪽 div가 각각 width를 가지고 중간의 div는 남는 공간을 차지(flex-1)하게 구성했을 때

중간 div안의 텍스트가 div를 벗어나는 경우 말줄임표를 추가하고 싶은데
flex-1 이라 그런지.. 자꾸 양 옆의 div width를 줄이고 글자가 차지할 공간을 만들더라고..?

그래서 이것저것 넣어봤는데
중간 div에 overflow-hidden, whitespace-nowrap 속성을 주고
그 안의 p에 overflow-hidden, overflow-ellipsis 속성을 주니까 원하는 대로 동작했다
overflow-hidden이 중복이라 어디 하나에만 있으면 안되나 했는데 안되더라 딱 저대로 있어야 됨...ㅠㅠ