domoindal domoindal - 19 days ago 5
CSS Question

CSS flex width issue

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?

Answer

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.

Comments