Делим ширину резинового div на три равных части (CSS)

Задача

Есть родительский div c относительной шириной. Ширина div зависит от разрешения экрана, т.е., все меняется на разных устройствах.

Нужно поместить в этот div три равные по ширине блока, чтобы они полностью заняли ширину родителя части без остатка.

<div id="parent">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Решение

Ширину родительского div мы не знаем (она меняется от разрешения к разрешению), значит задать задать фиксированную ширину внутренним блокам нельзя. Оперируем процентами. Проблема в том, что 100% на 3 без остатка не делится.

Вариант

.item {
    width: 33.333%;
}

отметаем, убого.

Правильно:

item {
    width: calc(100%/3);
}

Просто и изящно. Ширина внутренних блоков будет автоматически рассчитываться в зависимости от ширины родителя.