flex-shrink 속성은 flex-grow속성이 1 이상되면 ... - 인프런

아래 코드로 테스트 한 번 해보세요~
.a가 자기의 width인 500px보다 더 줄어들도록 브라우저를 작게 줄인 후 테스트 해보시면,
.a가 flex: 3 1 auto; 일 때와 flex: 3 0 auto; 일 때 차이점을 보실 수 있을 거에요.
flex-shrink가 0으로 세팅되었을 때는 창을 줄여도 .a가 500px 미만으로 줄어들지 않습니다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.container {
			display: flex;
			height: 100px;
		}
		.a {
			width: 500px;
			/* flex: 3 1 auto; */
			flex: 3 0 auto;
			background: red;
		}
		.b {
			flex: 1 1 auto;
			background: green;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="item a">
			AAA
		</div>
		<div class="item b">BBBB</div>
	</div>
</body>
</html>

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

flex-shrink 속성은 flex-grow속성이 1 이상되면 속성이 무시되나요?