CSS Grid - keep proportions of grid even with long overflowing content

Question

I have the following: https://jsfiddle.net/w19hpqzx/

However, I want the layout to look more like how it looks like without the code block: https://jsfiddle.net/4smwop2u/

Where the yellow aside portion isn't pushed off the screen, and where the code block .code-toolbar would ideally just have a scrollbar.

This can be fixed by adding a static width like:

.code-toolbar {
  max-width: 300px;
  overflow-x: auto;
}

But I want it to be 100% (take all of the space, no matter the size of the container).

is this possible?

Answer 1

Just set your columns to be 50% of the container

.container {
  display: grid;
  grid-template-columns: 50% 50%;
}

EDIT

The above works, but you can keep your grid-template-columns: 1fr 1fr if you want by adding this to your first grid element style ( main ):

min-width: 0;
overflow: scroll;

Doing this fixes the problem, because a grid item, by default, cannot be smaller than its content. The properties above override this.

You can also remove the overflow from .code-toolbar after this

Answer 2

Using the calc() ( documentation ) CSS function can do the trick:

grid-template-columns: calc(100% - 450px) 450px;