flex 布局

.xypg-left-nav {
    position: relative;
    flex: 0 0 310px;
}

flex: 0 0 310px;：这是 flex 简写属性，包含三个值：

flex-grow（第一个值 0）：定义 flex 项目的放大比例。此处为 0，意味着该项目不会在容器中放大。
flex-shrink（第二个值 0）：定义 flex 项目的缩小比例。此处为 0，意味着该项目不会在容器中缩小。
flex-basis（第三个值 310px）：定义 flex 项目的初始大小。此处为 310px，表示此项目将占据 310 像素的宽度。


.xypg-right-content {
    position: relative;
    flex: 1;
}
flex: 1;：这是 flex 简写属性，包含一个值，相当于 flex: 1 1 0;：

flex-grow（第一个值 1）：定义 flex 项目的放大比例。此处为 1，意味着该项目可以在容器中放大，占用剩余空间。
flex-shrink（第二个值 1）：定义 flex 项目的缩小比例。此处为 1，意味着该项目可以在容器中缩小。
flex-basis（第三个值 0）：定义 flex 项目的初始大小。此处为 0，表示此项目没有初始大小，将根据容器的剩余空间进行分配。

.xypg-left-nav 固定宽度为 310px，不会放大或缩小，而 .xypg-right-content 将根据剩余空间进行调整，既可以放大也可以缩小以适应容器的大小。