<select multiple> 废墟 CSS 网格

Question

请运行以下简单的网格布局示例，其中的网格单元格是 <select multiple></select>:

.grid-container {
  align-items: start;
  display: grid;
  grid-gap: 10px;
}

.grid-column-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-row-count-2 {
  grid-template-rows: repeat(2, min-content);
}

.col-1 {
  grid-column-start: 1;
}

.col-2 {
  grid-column-start: 2;
}

.row-1 {
  grid-row-start: 1;
}

.row-2 {
  grid-row-start: 2;
}

.rowspan-2 {
  grid-row-end: span 2;
}

.align-self-end {
  align-self: end;
}

.align-self-stretch {
  align-self: stretch;
}

<div class="grid-container grid-column-count-2 grid-row-count-2">
  <select multiple class="col-1 row-1 rowspan-2 align-self-stretch">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>E</option>
  </select>
  <input type="text" class="col-2 row-1" />
  <input type="text" class="col-2 row-2 align-self-end" />
  <input type="text" class="col-2 row-1" />
</div>

预期的结果是 select element 跨越两行，每行的高度由第 2 列中的 <input type="text" /> 元素定义，就像我替换 [=19= 时看起来一样] 用一个简单的 div:

.grid-container {
  align-items: start;
  display: grid;
  grid-gap: 10px;
}

.grid-column-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-row-count-2 {
  grid-template-rows: repeat(2, min-content);
}

.col-1 {
  grid-column-start: 1;
}

.col-2 {
  grid-column-start: 2;
}

.row-1 {
  grid-row-start: 1;
}

.row-2 {
  grid-row-start: 2;
}

.rowspan-2 {
  grid-row-end: span 2;
}

.align-self-end {
  align-self: end;
}

.align-self-stretch {
  align-self: stretch;
}

<div class="grid-container grid-column-count-2 grid-row-count-2">
  <div class="col-1 row-1 rowspan-2 align-self-stretch" style="background-color: #f2f2f2; border: 1px solid #bbb; overflow-y: scroll;"></div>
  <input type="text" class="col-2 row-1" />
  <input type="text" class="col-2 row-2 align-self-end" />
  <input type="text" class="col-2 row-1" />
</div>

问题：

如何设置 select 元素的样式，使之符合

a) 有一个固定的 min-height 比方说 30px;
b) 除此之外，只需从它所在的网格单元格中获取它的 height（就像第二个示例中的 div 那样）

换句话说：

如何防止 select 元素影响网格中的行高？

注意：我无法使用固定高度的行。

注意 2：如果解决方案在于如何为网格定义 grid-template-rows 的不同方法，我也对此持开放态度（只要它允许任意内容定义行高）。我不确定我的问题是否足够清楚。不清楚的地方请留言解释，我会尽力澄清。

Answer 1

实际上，具有多个 options 的 select 元素不会破坏网格行。

问题出在网格容器 align-items: start 和倒数第二个 input 上 align-self: end，它们将输入打包到行中。

在下图中的第二列中，请注意输入如何没有占据行的整个高度。那是 align-* 属性在发挥作用。

您没有看到与您的 DIV 示例相同的行为，因为该版本没有内容。在这里，有 4 行内容，就像您的第一个示例：

.grid-container {
  align-items: start;
  display: grid;
  grid-gap: 10px;
}

.grid-column-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-row-count-2 {
  grid-template-rows: repeat(2, min-content);
}

.col-1 {
  grid-column-start: 1;
}

.col-2 {
  grid-column-start: 2;
}

.row-1 {
  grid-row-start: 1;
}

.row-2 {
  grid-row-start: 2;
}

.rowspan-2 {
  grid-row-end: span 2;
}

.align-self-end {
  align-self: end;
}

.align-self-stretch {
  align-self: stretch;
}

<div class="grid-container grid-column-count-2 grid-row-count-2">
  <div class="col-1 row-1 rowspan-2 align-self-stretch" style="background-color: #f2f2f2; border: 1px solid #bbb; overflow-y: scroll;"><span>div A</span><br>
    <span>div B</span><br><span>div C</span><br><span>div D</span><br></div>
  <input type="text" class="col-2 row-1" />
  <input type="text" class="col-2 row-2 align-self-end" />
  <input type="text" class="col-2 row-1" />
</div>

Answer 2

考虑将 size 属性添加到 <select>。在 size="1" 和 size="3" 之间的情况下，将提供与所需结果相似的结果。

.grid-container {
  align-items: start;
  display: grid;
  grid-gap: 10px;
}

.grid-column-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-row-count-2 {
  grid-template-rows: repeat(2, min-content);
}

.col-1 {
  grid-column-start: 1;
}

.col-2 {
  grid-column-start: 2;
}

.row-1 {
  grid-row-start: 1;
}

.row-2 {
  grid-row-start: 2;
}

.rowspan-2 {
  grid-row-end: span 2;
}

.align-self-end {
  align-self: end;
}

.align-self-stretch {
  align-self: stretch;
}

<div class="grid-container grid-column-count-2 grid-row-count-2">
  <select multiple size="3" class="col-1 row-1 rowspan-2 align-self-stretch">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>E</option>
  </select>
  <input type="text" class="col-2 row-1" />
  <input type="text" class="col-2 row-2 align-self-end" />
  <input type="text" class="col-2 row-1" />
</div>

Answer 3

通过试验，我找到了解决问题的方法：

select {
  height: 24px;
  min-height: 100%;
}

似乎解决了问题。这似乎非常违反直觉的是 min-height 在这种情况下超过（覆盖）高度，有效地增加它。

select {
  height: 30px;
  min-height: 100%;
}

.grid-container {
  align-items: start;
  display: grid;
  grid-gap: 10px;
}

.grid-column-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-row-count-2 {
  grid-template-rows: repeat(2, min-content);
}

.col-1 {
  grid-column-start: 1;
}

.col-2 {
  grid-column-start: 2;
}

.row-1 {
  grid-row-start: 1;
}

.row-2 {
  grid-row-start: 2;
}

.rowspan-2 {
  grid-row-end: span 2;
}

.align-self-end {
  align-self: end;
}

.align-self-stretch {
  align-self: stretch;
}

<div class="grid-container grid-column-count-2 grid-row-count-2">
  <select multiple class="col-1 row-1 rowspan-2 align-self-stretch">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>E</option>
  </select>
  <input type="text" class="col-2 row-1" />
  <input type="text" class="col-2 row-2 align-self-end" />
  <input type="text" class="col-2 row-1" />
</div>

<select multiple> 废墟 CSS 网格

<select multiple> ruins CSS grid

css

html-select

css-grid