Как я могу гарантировать, что последний элемент всегда виден с «overflow-x: hidden»?

Question

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

Вот так

 A | b | c | d | e | f | G

и - при уменьшении ширины страницы должно отображаться

 A | b | c | d | e | G

, а НЕ - как overflow-x: hidden

 A | b | c | d | e | f

Плитка ' Ширина вычисляется с помощью переменной CSS следующим образом:

:root { --tilesize: max(144px, calc(-18px + (100vw - 12px) / 8)) }

, поэтому желаемый эффект состоит в том, что плитки должны сжиматься со страницей до точки, а затем начать исчезать

I попытался поместить средние плитки в <div> с шириной, равной общей ширине минус две плитки (первая и последняя), но последняя плитка (то есть: "G") исчезает - это CSS

.variable {
    width: calc(100vw - 20px - 2.5 * calc(12px + var(--tilesize)));
    height: calc(64px + var(--tilesize) );
    overflow-x: hidden;
    overflow-y: hidden;
    display: inline-block;
}

с добавленным уроном, который меняет порядок отображения плиток - он отображает

 A | G | b | c | d | e | f

Какой правильный способ сделать это?