flex-item에서 줄바뀜에 대하여...

Flex 핵심정리 #5 강의 실습 중에 의문점이 생겨서 질문드립니다.

제가 아래 html 처럼 작성하고 브라우저를 전체화면으로하고 확인했을 때는 예상한 대로 1:3:1로 공간을 잘 분배했습니다.

그리고 제가 브라우저를 500px로 하고 새로 고침을 하니까,

flex-basis가 width를 강제하지 않는 특징 때문에 1:3:1의 비율을 안 지키더군요.

그런데 문제는 <div>AAAAAAAA<div>의 내용을 Lorem으로 길~게 늘린 후에 브라우저 창을 500px로 새로고침하면, 줄 바꿈이 일어납니다.

이게 이상합니다.

애초에 AAAAAAA.. 라는 텍스트도 1:3:1을 못지키니 줄바꿈이 일어나는게 맞지 않나요?? 대체 이 줄바꿈의 기준이 뭔가요???

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Flex</title>
    <link rel="stylesheet" href="default.css">
    <style>
        .flex-container {
            display: flex;
        }

        .flex-item:nth-child(1) {
            flex: 1 1 0;
        }
        .flex-item:nth-child(2) {
            flex: 3 1 0;
        }
        .flex-item:nth-child(3) {
            flex: 1 1 0;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">AAAAAAAAAAAAAAA</div>
        <div class="flex-item">BBB</div>
        <div class="flex-item">CCCCCCCC</div>
    </div>
</body>
</html>

인프런 커뮤니티 질문&답변