Создайте игровой автомат с детьми динамической высоты

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

Макет будет иметь видимое «окно просмотра» 3 элементов одновременно. Чтобы «окно просмотра» не смещалось, все дочерние элементы должны иметь одинаковую высоту. Это заставило меня задуматься о двух разных маршрутах, но я не могу заставить их работать.

1. Использовать отображение: flex. С макетом столбца вы можете сложить их все в стопку. Проблема в том, что я не думаю, что вы можете сделать все дочерние элементы одинаковой высоты, если вы не укажете расчетную высоту в контейнере flex (таким образом, вам придется использовать js для расчета максимальной высоты всех дочерних элементов flex )
2. Используйте отображение: сетка. Из коробки вы можете сделать все дочерние элементы одинаковой высоты с сеткой. Проблема в том, как скрыть переполнение, гарантирующее, что вы показываете только 3 за раз в «окне просмотра» для игрового автомата?

Этот макет может быть невозможен без вычислений js, но из-за того, что он должен быть полностью отзывчивым, я не хочу повторять вычисления при каждом изменении размера окна. Может ли кто-нибудь придумать способ сделать это, используя чистый css?

Я сделал скрипку, чтобы показать простую реализацию. «Вьюпорт» — это красная рамка, а каждый элемент — в синей рамке. В реальном мире я бы скрывал все, что находится за пределами красной рамки, и не хотел бы специально устанавливать высоту для любого контейнера.

var scroll = document.getElementById('scroll');
var wrapper = document.getElementById('wrapper');

scroll.addEventListener('click', function() {
  wrapper.classList.toggle('scrolled');
});

.example {
  display: flex;
}

.container {
  height: 90px;
  width: 300px;
  outline: 1px solid red;
  z-index:1;
}

.wrapper {
  display: flex;
  flex-direction: column;
  transition-property: transform;
  transition-duration: 500ms;
}

.wrapper.scrolled {
  transform: translateY(-300px);
}

.inner {
  outline: 1px solid blue;
  flex-grow: 1;
  height: 30px;
}

.buttons {
  margin-right: 3em;
}

<div class="example">
  <div class="buttons">
    <button id="scroll">Scroll</button>
  </div>

  <div class="container">
    <div id="wrapper" class="wrapper">
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
    </div>
  </div>
</div>