为什么 Flex 子元素没有获得剩余空间？
在给定的 flex 布局中，前两个 flex 子元素并未获得剩余空间。这是因为：
flex: 1 等于 flex: 1 1 0%。这意味着 flex 子元素首先使用其最小内容宽度。但是，最小内容宽度不是用来确定剩余空间的。如果明确设置了 flex-basis，则剩余空间为容器大小减去每个元素的 flex-basis 大小。
在这个示例中，每个元素的 flex-basis 为 0%。因此，剩余空间大小为容器宽度减去元素边框大小。由于每个元素的 flex-grow 为 1，因此每个元素分配的大小为 (420 - 3 x 2) / 3 = 138。由于第一个元素的首选最小宽度大于 138，因此它将占据大约 218.48。
这导致剩余空间重新计算，剩余两个元素分配的大小变为 (420 - 218.48 - 2 x 2) / 2 = 98.76。同样的原因，第二个元素将取其首选最小宽度 100。这使得最后一个元素分配的大小变为 420 - 218.48 - 102 - 1 x 2 = 97.52，加上边框为 99.52。
因此，最小内容宽度用于约束元素的最终大小，而不是用来确定剩余空间。删除子元素的边框可以使计算更直观。