title: Issue with overlapping of div with other div while zooming
body: <p>While zooming the page whole Div is overlapping with other Div.
  Text everything is Overlapping with each other.. I am providing the HTML and css and some samle Image how its looking.. Please help me in this , Thanks In advance 
  [<img src="https://i.stack.imgur.com/kGUcY.png" alt="Sample Image">]
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> This is css code,While zooming the page whole Div is overlapping with eachother
  
  .flex-container{
      display: flex;
      //overflow-x:auto;
      overflow-y: hidden;
  }
  
  
  .officeflex{
      margin-right: 31px; 
      width:366px;   
      max-height:225px;
  }
  
  
  hr {
      display: block;
      height: 1px;
      border: 0;
      border-top: 1px solid #ccc;
      margin: 1em 0;
      padding: 0;
  }
  
  .d-flex.align-items-start.summary {
   display: flex;
   flex-direction: row;
    justify-content:space-between;
    margin:auto;
    max-width:100%;
    width:100%;
  }
  
  .align-items-center{
    .size{
      font-size: 13px;
     }
  }
  .office-address-heading{
  
      .Address{
          color:grey;
          font-size: 12px;
      }
  }
  
  .office-address-details{
      .mr-2{
          color: rgb(0, 195, 255); font-size: 20px
      }
  }
  
  .profile-details{
      margin-left:15px;
      padding:40px;
  
      .name{
          font-size:12px;
          line-height:22px;
          font-weight: 500;
      }
  
      .designation{
          font-size:12px;
          line-height:25px;
          font-weight: 400;
      }
  
      .phone{
          font-size:12px;
          font-weight: 100;
      }
  }
  .btn{
      font-size: 12px  !important;
      background-color: #0076C8;
      color: #FFFFFF;
  }
   
  
  .officeflex{
      margin: 10px;
      padding: 20px;
  }
  
  address{
      word-break: break-all;
      max-width: 100%;
  }
  
  .word-break-all{
      word-break: break-all;
  }
  .align-items-center{
    .size{
      font-size: 11px;
     }
  }
  .office-address-heading{
  
      .Address{
          color:grey;
          font-size: 11px;
          
      }
  }
  
  .office-address-details{
      .mr-2{
          color: rgb(0, 195, 255); font-size: 20px;
          margin-left: -13px;
      }
  }
  
   .Pad{
  
      padding: 60px 0px;
      margin-top: -300px;
   }
  
   body {
   margin: 0;
  }
  
  .outer-div-for-the-imgae-icon{position:relative; display:block; height:300px; width:300px;   }
  
  .outer-div-for-the-imgae-icon img{height:300px; width:300px; object-fit:cover;}
  
  .outer-div-for-the-imgae-icon i{position:absolute; top:0; left:100%; font-size:40px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>This is HTML Code, While zooming the page whole Div is overlapping with eachother
  
  &lt;div class="row"&gt;
  
              &lt;div class="col-12"&gt;
                  &lt;div class="profile-summary"&gt;
                      &lt;b&gt;Profile summary&lt;/b&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-12 col-12 p-0"&gt;
                      &lt;div class="col-6 float-left"&gt;
                          &lt;div class="outer-div-for-the-imgae-icon"&gt;
                              &lt;app-image [imagesrc]="imagePath" style="width: 190px;max-height: 190px;clip-path: square(25px at center);"
                                  class="d-none d-sm-block" alt="..."&gt;&lt;/app-image&gt;
                              &lt;i (click)="inputFile.click()" style="color : white;left: 180px; 
                              position: absolute; top: -5px; padding: 3px; background-color: rgb(0, 195, 255); 
                              border-radius: 50%;font-size: 12px;"
                                  class="fa fa-pencil fa-lg" aria-hidden="true"&gt;&lt;/i&gt;
                          &lt;/div&gt;
  
                          &lt;div class="col-6 Pad float-right"&gt;
                              &lt;div class="col-sm"&gt;
  
                                  &lt;span class="name"&gt;
                                      &lt;b style="color: rgb(25,25,112); font-size : 15px "&gt;{{myprofile?.FirstName}}sandyuehfu
                                          {{myprofile?.LastName}}hsjdbfhag&lt;/b&gt;
                                  &lt;/span&gt;
                              &lt;/div&gt;
  
                              &lt;div class="col-sm"&gt;
  
                                  &lt;span class="name"&gt;
                                      &lt;p&gt;{{myprofile?.Role}}cSS&lt;/p&gt;
                                  &lt;/span&gt;
                              &lt;/div&gt;
  
                              &lt;div class="col-sm"&gt;
  
                                  &lt;span class="name"&gt;
                                      &lt;p&gt;{{myprofile?.Phone}}809974375t {{myprofile?.UserName}}psuneudhfjhg&lt;/p&gt;
                                  &lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-6 float-right"&gt;
                          &lt;div class="col-12 "&gt;
                              &lt;div class="office-address-heading"&gt;
                                  &lt;p class="Address"&gt;Office Address&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="d-flex align-items-center"&gt;
                                  &lt;!-- &lt;i style="color:grey;" class="fa fa-map-marker fa-2x mr-2" aria-hidden="true"&gt;&lt;/i&gt; --&gt;
                                  &lt;address class="mb-0 size"&gt;
                                      {{myprofile?.OfficeAddress}} wyhsieghrblufijerhbiktbui
  
                                  &lt;/address&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;hr /&gt;
                          &lt;div class="col-sm"&gt;
                              &lt;div class="row1 office-address-heading"&gt;
                                  &lt;p class="Address"&gt;Communication Details&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="d-flex align-items-center office-address-details "&gt;
                                  &lt;div class="col-4"&gt;
                                      &lt;i class="fa fa-phone fa-2x mr-2" aria-hidden="true"&gt;&lt;/i&gt;
                                      &lt;a style="color: black;" href="tel:1-562-867-5309"&gt;{{myprofile?.Phone}}478596321012458
                                      &lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;div class=" d-flex col-8 align-items-center office-address-details float-right "&gt;
                                  &lt;i class="fa fa-envelope fa-2x mr-2" aria-hidden="true"&gt;&lt;/i&gt;
                                  &lt;a style="color: black;" href="mailto:rafael.cepeda@lpl.com"&gt;{{myprofile?.Email}}sandy.sandy@gmail.com
                                  &lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>