How to expand the width of a card with DetailsList(items = df_with_many_cols)?

[asadow]

I followed the Appsilon tutorial to a full dashboard and applied it to one of my tables. My table had more columns, and I noticed that only a limited number of columns showed. The card did not expand to fit all columns. (I believe this can be reproduced by just binding more columns to the dataframe in the link.) I tried to edit CSS classes, but to no avail. I'm out of ideas. Does this possibly have to do with 1 fr in the code below?

An aside: I noticed also that when I reduced the sidebar width, I ended up with an empty column on the right (even though .grid-container has what seems like only 2 columns). How can I make sure the 1 fr column takes up all the space right of the sidebar (AKA first column)?

.grid-container {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: 54px 1fr 45px;
  grid-template-areas: "header header" "sidenav main" "footer footer";
  height: 100vh;
}

[asadow]

Well I solved this by reading up on CSS grid and flexbox. E.g.

My card lived in the area main. I simply had to reduce the subtraction in max-width:

.analysis_page {
  grid-area: main;
  background-color: #faf9f8;
  padding-left: 10px;
  padding-right: 32px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 100px);
  overflow: auto;
}