Twitter Bootstrap Question posted in

How to prevent margin to overflow in CSS?-Twitter bootstrap

In the following code I notice the last row overflow the parent container. I have tried to use overflow: auto; but this adds scrollbars. How can I avoid the overflow?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">

<style>
    #a { height: 33%}
    #b { height: 17%}
    #c { height: 50%}
</style>
<div class="container border border-warning" style="height: 400px">
  <div id="a" class="row bg-primary m-2">A</div>
  <div id="b" class="row bg-secondary m-2">B</div>
  <div id="c" class="row bg-info m-2">C</div>
 </div>

https://codepen.io/anon/pen/PBLyZB

Tags:

6

Answers


  1. 0

    Simply make the container a flex container and you will have the shrink effect that will fix the issue. Then adjust the margin of the middle one to keep the same spacing like when you had margin-collapsing (flexbox disable margin-collapsing).

    #a { height: 33%}
#b { height: 17%}
#c { height: 50%}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container border border-warning d-flex flex-column" style="height: 400px">
  <div id="a" class="row bg-primary m-2">A</div>
  <div id="b" class="row bg-secondary mx-2">B</div><!-- margin only on the left and right -->
  <div id="c" class="row bg-info m-2">C</div>
</div>
    Login or Signup to reply.
  2. 0

    You can use display:flex. add display: flex; flex-direction: column; to the parent style.

    Or you can use calc to reduce the margin from the height – 

    #a { height: calc(33% - 0.5rem) }
#b { height: calc(17% - 0.5rem) }
#c { height: calc(50% - 0.5rem) }
    Login or Signup to reply.
  3. 0

    Add the overflow property on the parent element.

      .container {
        overflow: hidden;
    }

    Check documentation on : CSS overflow property

    Login or Signup to reply.
  4. 0

    It is because there is a margin on A,B,C (because of m-2), and the full height of the 3 divs is 100% + 4*8px, more than the height of the container.

    So you have to change the height of the container for auto if its not important to be 400px. (It would be 432 px.)

    Or

    You have to remove m-2 and change the margin to padding: .5rem and add box-sizing: border-box to A,B,C if the padding between the divs and the height ratio is important.

    Or

    Add overflow: hidden to the container, so the last divs overflow wont be visible, but in that case the #c { height: 50%} wouldn’t be true.

    Login or Signup to reply.
  5. 0

    The div boxes do not fit into the parent div box because of the margin space below each child div. The margin space below the divs is 8px. Total space occupied by margin is 32px which is 8% of the total space. So you must reduce the percentage height of each child div by 8/3px which is around 2px from each and 1px from any 2 of the divs.

    Login or Signup to reply.
  6. 0 
    #a { height: 33%}
#b { height: 17%}
#c { height: 50%}
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">

<div class="container d-flex flex-column p-2 border border-warning " style="height: 400px;">
  <div id="a" class="row bg-primary mx-2">A</div>
  <div id="b" class="row bg-secondary m-2">B</div>
  <div id="c" class="row bg-info mx-2">C</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search