Tính tham lam của các khối flex không có chiều rộng xác định trong CSS

Nếu các phần tử flex không được đặt chiều rộng, thì chiều rộng đó sẽ được hình thành dựa trên nội dung:

<div class="parent">
	<div class="child elem1">văn bản văn bản văn bản</div>
	<div class="child elem2">văn bản</div>
</div>

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}

Nếu đặt tính tham lam cho các phần tử như vậy, thì không gian trống sẽ được cộng thêm vào chiều rộng đã được hình thành bởi văn bản:

<div class="parent">
	<div class="child elem1">văn bản văn bản văn bản</div>
	<div class="child elem2">văn bản</div>
</div>

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex-grow: 1;
}
.elem2 {
	flex-grow: 1;
}