flex ooverflow в грид сетке

Question

Всем доброго времени суток. Столкнулся с такой проблемой что flex элемент с overflow ломает grid(пример кода ниже). По идее должно все работать - flex занимает все доступное пространство overflow не дает ему уйти за границы контейнера. На практике от просто расширяет grid. Как это исправить я нашел (grid-template-columns: calc(100% - 25rem) 25rem), но выглядит как костыль.Могли бы объяснить из-за чего так происходит? Как мне кажется это какой то баг c расчетом ширин элементов

.container {
            max-width: 70rem;
            margin: 0 auto;
            background: #ededed;
            padding: 3rem 0;
        }

        .grid {
            display: grid;
            grid-template-columns: 1fr 25rem;
            /* grid-template-columns: calc(100% - 25rem) 25rem; */
            margin: 5rem 0;
            height: 100%;
        }

        .grid-content {
            background: rgba(23, 23, 23, .1);
        }

        .sidebar {
            background: rgba(255, 0, 0, .1);
        }

        .flex-container {
            display: flex;
            justify-content: flex-start;
            overflow: auto;
            width: 100%;
        }

        button {
            display: inline;
        }

    <div class="container">
        <div class="grid">
            <div class="grid-content">
                <div class="fle-wrapper">
                    <div class="flex-container">
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                        <button class="flex-item">item</button>
                    </div>
                </div>
            </div>
            <div class="sidebar"></div>
        </div>
    </div>

БЛОГ НА HUSL

flex ooverflow в грид сетке

Ответы (0 шт):