css - 在小分辨率下，一个 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>

当我将浏览器的大小调整到 800px 以下时。div3 覆盖在 div2 上，我不想要这个。我希望每个 div 都有 100% 的宽度 请帮助并为我的英语不好在此致歉

标签： cssresponsive

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