css flex 布局子元素撑大父元素导致页面布局错乱

原因是没有给父元素设置一个固定的宽高，导致子元素 flex 的计算延伸到了父元素，给父元素设置固定的宽即可：

.main {
    /* 之前被撑大的外部父元素 */
  box-sizing: border-box;
  padding: 0 30px;
  border-right: 1px solid #ccc;
  width: 709px; /* 设置固定的宽 */
}
.albums {