css - <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跨越两行，每行的高度由 <input type="text" /> 定义第 2 列中的元素，就像我替换 select 时的样子一样用一个简单的 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

考虑添加 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>