Question

我有一个容器，我想放置一些物品，容器内物品的宽度有一个小问题。所有这些都溢出了一点。

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;
}

以下是working example

所有项目都是100％宽度，但填充量为10px（右侧和左侧），但应用此类填充会导致溢出。

我该如何避免这种情况？

Answer 1

添加以下css：

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

默认值为content-box。

来自Documentation：

box-sizing属性用于更改用于计算元素宽度和高度的默认CSS框模型。

CSS flex width问题

1 个答案: