CSS flex width issue

Question

I have a container where I want to place some items and there is a small issue with the width of the items within the container. All of them overflow a little bit.

HTML:

<div class="body_collections">
  <div class="item_holder">
    <div class="item_image">
    </div>
    <div class="item_text_holder">
      Line 1
    </div>
    <div class="item_checkbox">
    </div>
  </div>
  <div class="item_holder">
    <div class="item_image">
    </div>
    <div class="item_text_holder">
      Line 2
    </div>
    <div class="item_checkbox">
    </div>
  </div>
</div>

CSS:

.body_collections {
    width:100%;
    height: 250px;
    background-color:#ededed;
    overflow:hidden;
    overflow-y: scroll;
    padding:0 10px;
}
.item_holder {
    display:flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-flex-flow: row nowrap;
    justify-content:space-between;
    align-items:center;
    background-color:#FFF;
    width:100%;
    height:50px;
    margin:10px 0;
}
.item_image {
    width:50px;
    height:50px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    background-color:#CCC;
}
.item_text_holder {
    width:auto;
    height:50px;
    background-color:#119911;
}
.item_checkbox {
    width:75px;
    height:50px;
    background-color:#aa1111;
}

Here is the working example

All items are 100% width but with a padding of 10px (right & left), but applying such padding make the overflow.

How can I avoid this?

Mohammad Usman · Accepted Answer · 2016-11-14 12:14:59Z

1

Add following css:

.body_collections {
  box-sizing: border-box;
}

Default value is content-box.

From Documentation:

The box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements.

answered Nov 14, 2016 at 12:14

Mohammad Usman

39.6k20 gold badges99 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS flex width issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related