Как скрыть контент, выходящий за пределы области строк шаблона сетки 0,5fr? ⇐ CSS

[Anonymous]

Я работаю над складным устройством, которое хочу, чтобы оно было частично видно, когда оно не развернуто. Это почти работает, однако высота divs не соответствует высоте сетки. Когда я переключаю строки-шаблона сетки на 1fr, все работает правильно, то есть для развернутого состояния.
Это код в стилизованных компонентах для div и сетки:

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

const SectionContentWrapper = styled.div`
display: grid;
grid-template-rows: ${(props) => (props.$expanded ? "1fr" : "0.5fr")};
align-items: start;
transition: grid-template-rows 0.6s ease-out;
overflow: hidden;
`;

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

Подробнее здесь: https://stackoverflow.com/questions/787 ... -rows-area