same div's margin is increased when put under another same div-CodePudding

I am building a site design and I am placing two divs side by side, one with width 70 and other with width 30 and third div is below the width 30's div.

But the problem is third div is overflowing, I mean it is not matching with it's parent width which is 30, I think it is around 31 or 32 width,

And when I place some content in second div which is width 70 then third is going downwards, because it is overflowing and coming in the way of second div.

   .container-bar {
      display: flex;
    }

    .main {
      width: 70%;
      padding: 1em 1.5em;
      background-color: #fff;
      border-radius: .5em;
      margin-left: 0.8em;
      margin-right: 0.5em;
    }

body {
    background-color: #eee;
    font-family: Arial, Helvetica, sans-serif;
}

    .sidebar {
      width: 30%;
      padding: 1.5em;
      margin-top: 0;
      margin-right: -0.5em;
      margin-left: 0.5em;
      background-color: #fff;
      border-radius: .5em;
      overflow: auto;
      max-height: 20em;
    }

  <div >
    <main >
      <a href="#" >
        Lorem ipsum
      </a>
      <br>
      <a href="#" >
        Lorem ipsum
      </a>
      <a href="/sponsors" >
      </a>
    </main>

    <span >
      <span>
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem ipsumLorem ipsum
    Lorem ipsumLorem ipsum
    Lorem ipsumLorem ipsum        Lorem ipsumLorem ipsum
      </span>
    </span>
  </div>
  
    <div >
  <main >
    <a href="#" >
      Lorem ipsum
    </a>
    <br>
    <a href="/facebook" >
      Lorem ipsum
    </a>
    <a href="#" >
    </a>
    Lorem ipsumLorem ipsum
    Lorem ipsumLorem ipsum
    Lorem ipsumLorem ipsum
    Lorem ipsumLorem ipsum
    Lorem ipsumLorem ipsum
    Lorem ipsumLorem ipsum
    Lorem ipsumLorem ipsum
  </main>
</div>

Design which I expected

Design which I expected

Design which I am getting

Design which I am getting

I have also set the display: flex but it is still not showing what I expected. I am trying to fix every div in its position and also second div cover the left full page

Any help would be much appreciated. Thank You in Advance

CodePudding user response：

The very first thing: you will need to define box-sizing for all elements. You can simply do it by adding:

* {
     box-sizing: border-box;
 }

in your css

Then collective width of all elements within any parents should not increase 100% of parent div. This includes width and margins of all child elements. If you are not using box-sizing:border-box then you should count width margin padding for total width any element.
You also need to update your code as per your scenario. In your case you have: 1 row with 2 columns Where 1 column in the row is further divided into two rows. So for this you will need to create flex column in sidebar. So after fixes, here is your final code:

   .container-bar {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .main {
      width: 60%;
      padding: 1em 1.5em;
      background-color: #fff;
      border-radius: .5em;
      margin-left: auto;
      margin-right: 0;
      margin-top: 0;
      margin-bottom: auto;
      height: 100%;
 
    }

body {
    background-color: #eee;
    font-family: Arial, Helvetica, sans-serif;
}
   .sidebar-wrap {
      width: 30%;
      height: 100%;
   }
    .sidebar {     
      padding: 1.5em;
      margin-top: 0;
      margin-right: -0.5em;
      margin-left: 0.5em;
      background-color: #fff;
      border-radius: .5em;
      overflow: auto;
      min-height:0;
      max-height: 14em;
    }
    
    * {
      box-sizing: border-box;
    }

 <div >
     <div >
        <main >
        <a href="#" >
          Lorem ipsum
        </a>
        <br>
        <a href="#" >
          Lorem ipsum
        </a>
        <a href="/sponsors" >
        </a>
      </main>
        <main >
    <a href="#" >
      Lorem ipsum
    </a>
    <br>
    <a href="/facebook" >
      Lorem ipsum
    </a>
    <a href="#" >
    </a>
    Lorem ipsumLorem ipsum
    Lorem ipsumLorem ipsum
    Lorem ipsumLorem ipsum
    Lorem ipsumLorem ipsum
    Lorem ipsumLorem ipsum
    Lorem ipsumLorem ipsum
    Lorem ipsumLorem ipsum
  </main>
     </div>
    

    <span >
      <span>
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem ipsumLorem ipsum
    Lorem ipsumLorem ipsum
    Lorem ipsumLorem ipsum        Lorem ipsumLorem ipsum
      </span>
    </span>
    
  
    
  </div>