vue를 쓰면서 이상한 점이 있는데 왜 그런건지 모르겠어서 질문드립니다!


<div style="display: flex">
    <div style="flex: 1">11</div>
    <div style="flex: 1">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis fugit vel delectus mollitia, velit hic ratione enim ipsa nam ut earum laboriosam porro tempora quam quod necessitatibus ducimus eius in.lorem
    </div>
  </div>


vue 파일에 이런 코드가 있습니다. 자식 요소가 동일한 크기를 가지고 글자가 들어가요. 해당 코드에서는 정확히 절반씩 차지해요.


그런데 자식 요소내 문자열을 props로 받으면 이상하게 한줄로 쫙 나열되서 원하는 결과 도출이 안됩니다.


<div style="display: flex">
    <div style="flex: 1">11</div>
    <div style="flex: 1">
      {{ options[0].description }}
    </div>
  </div>


물론 css 에서 word-break 속성을 쓰면 다음줄로 표현이 되긴 하는데 왜 props로 문자열 받아서 출력하는거랑 직접 문자열 넣어서 출력한거랑 다른건지를 잘 모르겠습니다..