Мобильная версияЯ бы хотел создайте элемент наложения с элементами управления для элемента отображения, где элементы управления расположены вертикально и выровнены по правому и нижнему краю экрана. Существует одна кнопка элемента фиксированного размера, содержащая некоторые элементы управления, а затем информация об элементе динамического размера, которая появляется только тогда, когда некоторые части дисплея активны. Информация всегда содержит кнопку закрытия и некоторую информацию динамической высоты. Я бы хотел, чтобы контейнер info всегда сжимался до своего содержимого. Однако если высота содержимого слишком велика и содержащий элемент info будет выше, чем оставшееся вертикальное пространство контейнера наложения, я бы хотел, чтобы содержимое можно было прокручивать.
Я думал, что просто использую гибкий контейнер и атрибуты overflow-y, но, похоже, это не поможет. Кажется, что переполнение срабатывает только в том случае, если родительский контейнер имеет определенную высоту, но в моем случае родительский контейнер является динамическим, то есть он должен расти до определенной высоты, а затем останавливаться, пока содержимое становится прокручиваемым.
Это была моя попытка:
Код: Выделить всё
const info = document.querySelector(".info");
const content = document.querySelector(".content");
document.querySelector("#open-info").addEventListener("click", () => {
info.style.display = "flex";
});
document.querySelector("#close-info").addEventListener("click", () => {
info.style.display = "none";
});
document.querySelector("#increase-height").addEventListener("click", () => {
content.style.height = `${content.clientHeight + 30}px`;
});
document.querySelector("#decrease-height").addEventListener("click", () => {
content.style.height = `${content.clientHeight - 30}px`;
});Код: Выделить всё
.display {
position: relative;
width: 400px;
height: 300px;
background-color: gray;
}
.overlay {
position: absolute;
display: flex;
width: 100%;
height: 100%;
top: 0;
left: 0;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
.info {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
flex-shrink: 0;
background-color: orange;
padding: 10px;
max-height: 230px;
/* overflow works, but fixed size is undesirable, as the remaining space in main-axis direction should be used up */
/* max-height: 100%; overflow doesn't work, as it refers to parent's height, not to remaining available space in main-axis direction*/
}
.info-content-wrapper {
padding: 5px;
overflow-x: hidden;
overflow-y: auto;
}
.content {
width: 80px;
height: 150px;
background-color: yellow;
}
.controls {
background-color: lightblue;
padding: 5px;
flex: 0 0 auto;
}Код: Выделить всё
Close
Open info
+
-
В этом примере вы можете использовать кнопки, чтобы скрыть/показать информацию. , а также увеличить/уменьшить высоту содержимого. Я использовал фиксированную максимальную высоту: 230 пикселей на .info, чтобы продемонстрировать, как это должно работать. Однако вместо использования фиксированной максимальной высоты следует использовать оставшееся вертикальное пространство гибкого контейнера. Но когда я использую max-height: 100%, он (согласно определению) будет относиться к общей высоте родительского гибкого контейнера. Если я вложу его дальше (например, внесу оболочку вокруг внутреннего HTML-кода .info) и установлю максимальную высоту этого элемента на 100%, это все равно не сработает.
Мне кажется, что ответ должен быть очень простым, но я не могу найти решение, используя только гибкую разметку и не прибегая к обходным путям с помощью Calc. Я чувствую себя очень глупо по этому поводу и был бы очень рад помощи!
Подробнее здесь: https://stackoverflow.com/questions/783 ... -direction
