CSS Layout with a container and two sidebars

Question

I've tried to achieve this layout with CSS, however, the sidebars (in red) expand whenever there is content in them. I would like if the sidebars maintained a constant width regardless of the content inside of them.

.wrapper {
    display: flex;
}

.container {
    flex-grow: 1;
    max-width: 1024px;
    width: 100%;
}

.sidebar {
    flex-grow: 1;
    min-width: fit-content;
}

Answer 1

flex-basis is the way.

.wrapper {
    display: flex;
}

.container {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 1024px;
}

.sidebar {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc((100vw - 1024px)/2);
}

Replacing 1024px with whatever you desire the container width to be.