I am building a stepper component using a CSS grid.

The grid has two rows and its column count is based on the number of steps in the stepper.

Each step has a header and a body. Each step header lives in row 1 and takes exactly one column of the grid.

I've made each step header to be as big as its content and to stretch until it reaches the min-width of its siblings.

grid-template-columns: repeat(var(--steps-count), minmax(100px, auto));

The body of each step starts at row 2 and spans the number of columns in the first row, only the body of the selected step is visible, all others are hidden.

THE PROBLEM: If the step body has short content the grid auto columns are working as expected, but if the body has a huge amount of content like in step 3 in example 1, all the columns in the grid look the same size, it's like the columns no longer respect the auto in the minmax() function and behave like they are all set to 1fr.

THE FIX: The only fix I found is to explicitly set the width of the step body container to match the width of the entire stepper. I really want to avoid that, since the content of the step headers can be changed at runtime.

Example 1 - step with big body content

.stepper {
  display: grid;
  grid-template-columns: repeat(var(--steps-count), minmax(100px, auto));
  row-gap: 8px;
  font-family: "Roboto", sans-serif;
}

.step {
  display: contents;
}

.step__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #000;
  color: #fff;
  padding: 8px;
  gap: 8px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #fff;
}

.step__body {
  display: none;
  grid-row-start: 2;
  grid-column: span var(--steps-count);
  padding: 16px;
}

.step__content {
  display: none;
}

.step__header-text {
  width: 100%;
  text-align: center;
}

.step__header-title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.step__header-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 12px;
}

.step__header-indicator::after {
  content: "