在小分辨率下，一个 div 覆盖另一个（flex）

Question

我有这个代码

 .div1{
      width:100%;
    }
    .div2{
      width:100%;
    }
    .div3{
      width:100%;
    }
    .div4{
      width:100%;
    }

    @media(max-width:800px){
      .div1,.div2,.div3,.div4{
        width:100%;
        height:100%;
      }
      .flexyy{
        display:flex;
        flex-direction:row;
        flex: 1; 
        flex-wrap:wrap;
      }
    }

<div class='flexyy'>
      <div class='div1'>....</div>
      <div class='div2'>....</div>
      <div class='div3'>....</div>
      <div class='div4'>....</div>
    </div>

当我将浏览器的大小调整到 800 像素以下时。 div3 叠加在 div2 上，我不想要这个。我希望每个 div 都有 100% 的宽度请帮忙，对不起我的英语不好提前致谢

Answer 1

添加box-sizing:border-box;可能会对你有所帮助

   * {
      box-sizing:border-box;
       }
    .div{
      width: 100%;
      border: 1px solid black;
      padding:5px;
    }
     .flexyy{
        display: flex;
        flex-direction: column;
         flex: 1; 
         text-align: justify;
         }

    @media(max-width:800px){

      .flexyy{
        flex-direction: row;
        flex-wrap: nowrap;
      }
    }

<div class='flexyy'>
          <div class='div'>
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has
          </div>
           <div class='div'>
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has
          </div> <div class='div'>
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has
          </div> <div class='div'>
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has
          </div>
        </div

Answer 2

使用css 网格 + 小数单位(fr)

重构代码：

HTML

<div class='flexyy'>
    <div>....</div>
    <div>....</div>
    <div>....</div>
    <div>....</div>
</div>

CSS

.flexyy {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

在小分辨率下，一个 div 覆盖另一个（flex）

On small resolution, one div overlay another (flex)

css

responsive