Функция calc оставляет дополнительное пространство в контейнере, несмотря на то, что дети добавляют до 100% минус желоб

Question

В контейнере находятся 2 дочерних элемента, которые должны занимать одинаковое количество пространства, за исключением горизонтального желоба (6rem).

Я пытался использовать эти расчеты для определения размера детей:

• рассчит (50% - 3рем)
• calc ((100% - 6rem) / 2)

Тем не менее, оба они оставляют дополнительное пространство, как вы можете видеть изображение ниже (контейнер серый, а дети красные).

Код SCSS:

.row {
  max-width: 114rem;
  background-color: #eee;
  margin: 0 auto;
  .col-1-of-2 {
    width: calc(50% - 3rem);
    background-color: orangered;
    float: left;
    &:not(last-child) {
      margin-right: 6rem;
    }
  }
}

/*Generated CSS from SCSS*/

.row {
  max-width: 114rem;
  background-color: #eee;
  margin: 0 auto;
}

.row .col-1-of-2 {
  width: calc(50% - 3rem);
  background-color: orangered;
  float: left;
}

.row .col-1-of-2:not(last-child) {
  margin-right: 6rem;
}

<div class="row">
  <div class="col-1-of-2">Col 1 of 2</div>
  <div class="col-1-of-2">Col 1 of 2</div>
</div>

У меня вопрос: как я могу, чтобы оба ребенка занимали 50% контейнера без водосточного желоба?

Answer 1

Вам нужно написать это так:

.row .col-1-of-2:not(:last-child) {
  margin-right: 6rem;
}

Answer 2

Избегайте использования поплавков для позиционирования, если только они не нужны, они ненадежны.
Я предполагаю, что вы не используете загрузчик.
Установите .row на display: flex и задайте justify-content: space-around.
Затем установите .col-1-of-2 на width: calc(50% - 3rem).
Таким образом, у вас будет 1.5rem слева, то же самое справа и 3rem в середине.Больше не нужно ничего возиться с полями и отступами.

Помните, что ширина в процентах основана на контейнере width, а не на его max-width, поэтому вам нужно указать это, даже если это другой процент.