Как установить мин-дно при использовании позиционирования якоря в CSS? ⇐ Html

[Anonymous]

При использовании позиционирования привязки я хочу, чтобы элемент не расширялся за границы экрана (или другого контейнера). Например: < /p>

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

document.getElementById("flyout2").innerText += " long".repeat(100);< /code>
.buttons {
display: flex;
justify-content: space-around;
}

.flyout {
position: fixed;
--width: 45dvw;
width: var(--width);
border: 1px solid black;
background-color: yellow;
border-radius: 8px;
/* position-area: bottom; */
/* `position-area` has too many limitation. */
top: anchor(bottom);
left: calc(anchor(center) - var(--width) / 2);
overflow: auto;
}

[data-anchor-name] {
anchor-name: attr(data-anchor-name type());
}

[data-position-anchor] {
position-anchor: attr(data-position-anchor type());
}< /code>

Show Flyout
Show Flyout

This flyout is positioned below the button through the anchor, and the text is short.

This flyout is positioned below the button through the anchor, and the text is very long

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

.flyout {
bottom: calc-size(auto, min(0, size));
}

Недопустимое объявление, потому что функция Call-size применяется только к свойствам размера, например, ширина и высота , и не влияет на нижнюю .

Изменение мышления, регулирующее с высоты вместо нижнего . В частности, мы можем использовать мощное свойство Max-hight .

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

.flyout {
max-height: calc(100dvh - anchor(bottom));
}

Недопустимое объявление, потому что функция Anchor применяется только к свойствам вставки, а не к свойствам размера. Тем не менее, существует также функция размером с привязки , но, по-видимому, она не имеет ничего общего с требованиями.

Используйте максимальный класс в сочетании с ..flyout {
max-height: fit-content; /* or max-content */
bottom: 0;
}
< /code>
Допустимое объявление, но не имеет эффекта. < /p>

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

Подробнее здесь: https://stackoverflow.com/questions/796 ... ing-in-css