Изменение размера столбцов без переполнения

Question

Я хочу, чтобы мои встроенные столбцы сначала начинались с интервала 50/50, а затем могли изменять их размер, не переполняя столбец, который их содержит.

То, что я получаю, - это исходные столбцы, размер которых приблизительно равен 20/80, и когда я изменяю размер, правый столбец кровоточит за пределами его окружающего столбца, пока значение if не достигнет минимума.

body {
  margin: 10px;
}

wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: [col] 50px [col] minmax(200px, 1fr) [col] minmax(200px, 1fr);
  grid-template-rows: [row] 50px [row] minmax(250px, 1fr) [row] 25px;
  width: 96vw;
  height: 96vh;
  background-color: #fff;
  color: #444;
}

header {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 80%;
  grid-column: col / span 3;
  grid-row: row;
}

tail {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 80%;
  grid-column: col 2 / span 2;
  grid-row: row 3 / span 2;
}

mode {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 80%;
  grid-column: col;
  grid-row: row 2 / span 3;
}

data {
  grid-column: col 2 / span 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 5px;
  grid-template: "left right" 1fr / min-content 1fr;
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 80%;
}

primary {
  grid-area: left;
  overflow: auto;
  min-width: 120px;
  max-width: 80vw;
  resize: horizontal;
  background-color: #ccc;
  color: #444;
  border-radius: 5px;
  padding: 10px;
  font-size: 100%;
}

secondary {
  grid-area: right;
  overflow: auto;
  min-width: 120px;
  max-width: 80vw;
  background-color: #ccc;
  color: #444;
  border-radius: 5px;
  padding: 10px;
  font-size: 100%;
}

<wrapper>
  <header>header</header>
  <mode>mode</mode>
  <data>
        <primary>primary data</primary>
        <secondary>secondary data</secondary>
    </data>
  <tail>tail</tail>
</wrapper>

Answer 1

То, что я получаю, - это исходные столбцы, размер которых приблизительно равен 20/80 ...

Кажется, это то, что вы определили для своих столбцов:

data {
    display: grid;
    grid-template: "left right" 1fr / min-content 1fr;
}

Последние два значения в grid-template представляют размеры столбцов.

Если вы хотите два столбца 50/50, попробуйте вместо этого:

data {
    display: grid;
    grid-template: "left right" 1fr / 1fr 1fr;
}

... и когдаЯ изменяю размер правого столбца за пределами его окружающего столбца до тех пор, пока не достигнет минимума.

Ну, у вас установлена ​​минимальная ширина.

200px минимумов в двух последних столбцах вашей внешней сетки:

wrapper {
    display: grid;
    grid-template-columns: [col] 50px [col] minmax(200px,1fr) [col] minmax(200px,1fr);
}

120px минимумов в ваших областях сетки в вашей вложенной сетке:

primary {
    grid-area: left;
    min-width: 120px;
}

secondary {
    grid-area: right;
    min-width: 120px;
}

Где выожидать их переполнения?