Установить размер элемента при изменении размера окна

Question

У меня есть этот базовый c обработчик событий

window.addEventListener("resize", adjustSize);

, где все работает, как ожидалось, пока в игру не вступит более сложный дизайн с grid и flex: я подготовил минимальный пример тестирования здесь (см. код ниже). Затем изменение размера окна путем перетаскивания его стороны работает, как и ожидалось, но прерывистое изменение размера (кнопка «Развернуть») приводит к тому, что измененный элемент немного смещен (конец полосы не достигает внешней стороны границы поля).

Итак, я предполагаю, что размер родительского элемента изменяется, затем запускается обработчик изменения размера, а затем он немного больше, изменяя другие элементы (я тестирую на последних Chrome и Opera, Windows 7). И действительно, небольшая задержка обработчика решает проблему:

window.addEventListener("resize", ()=>setTimeout(adjustSize,10));

Однако слишком маленькая задержка (1 мс) не помогает. Есть ли способ решить это по замыслу?

function adjustWidth() {
  bar.style.width = box.offsetWidth + 'px';
  bar.style.height = box.offsetHeight + 'px';
}
adjustWidth();
window.addEventListener("resize", adjustWidth);

html, body { height: 100%; }
body { margin: 0; display: grid; grid-template-columns: repeat(12, 1fr); }
#box { box-sizing: border-box; border: 1em solid green; grid-column: 1 / span 9; }
#bar { position: absolute; box-sizing: border-box; }
#bar { display: flex; align-items: stretch; flex-direction: column; }
.sep { background: black; flex: 0 0 0.25em; }
.board:first-child { flex: 0 0 50%; }
.board:last-child { flex: 1 0 auto; }

<div id="bar">
  <div class="board"></div>
  <div class="sep"></div>
  <div class="board"></div>
</div>
<div id="box"></div>