таблица flexbox, все div выровнены, но одна, границы не совпадают, не знаю почему

Question

Я делаю эту таблицу, используя flexbox, каждая граница совпадает, но, как вы видите в скрипте, во второй таблице, ячейка с текстом: RIGHT SIDE NOT ALIGNED имеет границу, которая не совсем выровнена с границей строка ниже!

https://jsfiddle.net/buwgq14a/39/

Пробовал все, сходит с ума, какое-нибудь решение? Я сделал то же самое, что и для верхней таблицы, и там она работает без проблем, понятия не имею, что меняется между двумя таблицами ..

спасибо

Answer 1

Проблема в том, что когда вы задаете ширину как 10% и даете 1 пиксель за деление, ширина эквивалентна 10% + 1px.

Вы можете задать свойство размера ящика, чтобы ширина всегда оставалась на 10%,

В своем коде для класса добавьте свойство размера окна

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