时间戳

首页 > 解决方案 > 调整列大小而不溢出

css - 调整列大小而不溢出

问题描述

我希望我的嵌入列首先以 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>

标签： csscss-grid

解决方案

我得到的是大约 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);
}

嵌套网格中网格区域的最小 120 像素：

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

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

您希望它们在哪里溢出？

推荐阅读