CSS 浏览器缩小之后页面错乱 块不见问题

问题1：

浏览器正常100%显示的时候：今日推荐是看得见的。 

 浏览器缩小，小于100%之后，今日推荐被挤不见了。

今日推荐块的DIV的CSS原配置是：

 .today-recommend {
        .py-container {
            width: 1200px;
            margin: 0 auto;

            .recommend {
                height: 165px;
                background-color: #eaeaea;
                margin: 10px 0;
                display: flex;
}
}
}

解决：

 给最后层div 加上宽度，左右外边距自适应。
  width: 1200px;
  margin: 1px auto;

第二层DIV加上溢出隐藏： overfolw:hidden;

.today-recommend {
  width: 1200px;
  margin: 1px auto;
  //

  .py-container {
    margin:0 auto;
    overflow: hidden;
    width: 1200px;


    .recommend {
      height: 165px;
      background-color: #eaeaea;
      margin: 10px 0;
      display: flex;
}}}

 重新运行看效果：

缩小之后了能显示出来了。

问题2：

右侧的男装图片在缩小之后遮挡了下面的内容

 解决：

因为对应父DIV没有设置内容溢出隐藏，在对应父div上：

//防止缩小时遮挡下面图层
overflow: hidden;

.list-container {
  width: 1200px;
  margin: 0 auto;

  .sortList {
    height: 464px;
    padding-left: 210px;
    //防止缩小时遮挡下面图层
    overflow: hidden;
}}

改完之后，缩小之后图片不会遮挡下面了。