css - 在不溢出的情况下调整列的大小

Question

我希望我的嵌入列首先以 50/50 间距开始，然后能够调整它们的大小而不溢出包含它们的列。

我得到的是大约 20/80 的初始列，当我调整右列的大小时，右列会溢出其封闭列，直到达到其最小值。

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

What I'm getting is initial columns that are approximately 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;
}

... and when I resize the right column bleeds outside its enclosing column until if reaches its minimum.

好了，您已经设置了最小宽度。

外网格的最后两列最少 200 像素:

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

嵌套网格中的网格区域至少 120 像素:

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

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

您希望它们溢出到哪里？