CSS box-sizing: border-box все еще добавляет размер границы к ширине элемента

Question

Следующий пример демонстрирует проблему, с которой я столкнулся.

Поэтому, если у меня есть контейнер шириной 200 пикселей

, я добавляю строку шириной 200 пикселей в контейнер (добавит много строки)

Я хочу добавить div к строке, общая длина которой составляет 200 пикселей (каждая строка отличается)

Все работает нормально, пока я не добавлю границу 1px solid в div .cont.

Почему размер рамки не учитывает границу .cont?

[Редактировать] три элемента .cell не отображаются с добавленной границей, без границы отображаются все три элемента .cell , [/ Edit]

*,
*:before,
*:after {
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  -ms-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

.cont {
  position: absolute;
  background-color: white;
  font-size: 12px;
  overflow: hidden;
  border: solid;
  /* Remove this and it works */
  border-color: purple;
  border-width: 1px;
  height: 200px;
  width: 200px;
  margin: 0;
  padding: 0;
}

.h_row {
  display: block;
  width: 100%;
  height: 22px;
  line-height: 22px;
  background-color: red;
  overflow: hidden;
  border-bottom: solid;
  border-bottom-color: orange;
  border-width: 1px;
  margin: 0;
  padding: 0;
}

.cell {
  display: block;
  float: left;
  font-size: 11px;
  height: 20px;
  line-height: 20px;
  text-align: left;
  text-indent: 2px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.h_row>.cell {
  font-size: 12px;
  text-align: center;
  height: 22px;
  line-height: 22px;
  border-right: solid;
  border-right-color: pink;
  border-right-width: 1px;
  background-color: green;
}

.h_row>.cell:last-child {
  border-right: none;
}

.w50 {
  width: 50px;
}

.w100 {
  width: 100px;
}

<div class="cont">
  <div class="h_row">
    <div class="cell w100">100</div>
    <div class="cell w50">50</div>
    <div class="cell w50">50</div>
  </div>
</div>

Answer 1

Вы должны использовать box-sizing: content-box;, чтобы исключить ширину границы из ширины элемента, а контейнер остается 200px.

Answer 2

Это было на самом деле очень просто.

Мне не хватало, чтобы .cont div был 200px с 1px границей слева и справа.

Поэтому .h_row внутри него - 198px с размером блока, как используется.

Таким образом .cell нужно добавить до 198px, а не 200px.

Я знал, что это было что-то простое - просто нужна была небольшая помощь, чтобы найти это!

-Спасибо @ZohirSalak!

Answer 3

может быть, вместо использования рамки, вы можете использовать box-shadow, но поместите ее в рамку, что означает, что граница в 1px в основном внутри контейнера

, и, возможно, другой способ решить эту проблему - не иметь размеры в пикселях, которые вы можете попробуйте использовать проценты для ширины, такие как 50% или 10%

, если вы хотите код для этого, вы можете попробовать этот сайт: ссылка