Мультипанель, где контент всегда одинакового размера, но отображается только один ⇐ CSS

[Anonymous]

Я пытаюсь использовать CSS/HTML для создания многопанельного виджета, в котором пользователи могут перемещаться по различным панелям. В идеале следующая кнопка находится под содержимым и не перемещается.
Чтобы поддержать это, я хотел бы сделать так, чтобы панели всегда были одинаковой высоты (даже если одна было больше контента, чем у другого). Я пробовал использовать сетку, чтобы заставить их иметь одинаковую высоту, но если я использую display: none, то высота сетки не учитывает неотображаемые элементы. Если бы я использовал видимость: скрыто, то скрытые панели по-прежнему будут занимать место в DOM, но просто ничего не будут показывать.

Код: Выделить всё

$('#next-button-display').click(function() {
$('#first-display').toggleClass('none');
$('#second-display').toggleClass('none');
});

$('#next-button-vis').click(function() {
$('#first-vis').toggleClass('hidden');
$('#second-vis').toggleClass('hidden');
});

Код: Выделить всё

.container {
background-color: blue;
padding: 10px;
display: grid;
grid-auto-rows: 1fr;
}

.first {
background-color: purple;
}

.second {
background-color: yellow;
}

.none {
display: none;
}

.hidden {
visibility: hidden;
}

Код: Выделить всё

Using display


panel one

panel two

which has two lines




Using visibility


panel one

panel two

which has two lines

Есть идеи по реактивному решению этой проблемы?

Подробнее здесь: https://stackoverflow.com/questions/790 ... e-is-shown