收缩 <select> 元素以适应嵌套的 flexbox

Question

我正在尝试让一些 <select> 元素缩小以水平放置在垂直 flexbox 中，每个元素周围都有一个包装器。在下面的示例中，我希望红色框永远不会超出 select 元素（下拉列表），但 select 元素应该缩小以适合。

我尝试过的两种可能性如下：在情况 1 中，容器在小范围内表现正常（select 框缩小），在情况 2 中，红色框在大范围内表现正常（红色盒子不会长得太宽）。有没有办法结合这些行为？

div, label {
  border: 1px solid black;
  margin: 1px;
  padding: 1px;
}

.container {
  display: flex;
  flex-direction: column;
  resize: horizontal;
  overflow: hidden;
  width: 400px;
  min-width: 90px;
}

label {
  display: flex;
  min-width: 0;
  flex-direction: row;
  border-color: red;
}

.align-stretch { align-self: stretch }

.align-start { align-self: flex-start }

select {
  text-overflow: ellipsis;
  min-width: 0;
  margin: 2px;
}

<div class="container">
  <p>Resize this box</p>
  <label class="align-stretch">
    C1:
    <select>
      <option>This one is stretchy</option>
    </select>
  </label>
  <label class="align-start">
    C2:
    <select>
      <option>This is start-aligned</option>
    </select>
  </label>
</div>

Answer 1

更新解决方案（修复了父元素的填充问题）：

使用max-width: max-content;并保持拉伸行为

div,
label {
  border: 1px solid black;
  margin: 1px;
  padding: 1px;
}

.container {
  display: flex;
  flex-direction: column;
  resize: horizontal;
  overflow: hidden;
  width: 400px;
  min-width: 90px;
}

label {
  display: flex;
  min-width: 0;
  flex-direction: row;
  border-color: red;
  box-sizing: border-box;
}

.align-stretch {
  align-self: stretch;
  max-width: max-content;
}

select {
  text-overflow: ellipsis;
  min-width: 0;
  margin: 2px;
}

<div class="container">
  <p>Resize this box</p>
  <label class="align-stretch">
    C2:
    <select>
      <option>This one is stretchy</option>
    </select>
  </label>
</div>

原解：在flex-start的情况下加上max-width: 100%。请注意，这不考虑父元素的填充。

div, label {
  border: 1px solid black;
  margin: 1px;
  padding: 1px;
}

.container {
  display: flex;
  flex-direction: column;
  resize: horizontal;
  overflow: hidden;
  width: 400px;
  min-width: 90px;
}

label {
  display: flex;
  min-width: 0;
  flex-direction: row;
  border-color: red;
  box-sizing:border-box;
}

.align-stretch { align-self: stretch }

.align-start { align-self: flex-start; max-width:100%; }

select {
  text-overflow: ellipsis;
  min-width: 0;
  margin: 2px;
}

<div class="container">
  <p>Resize this box</p>
  <label class="align-stretch">
    C1:
    <select>
      <option>This one is stretchy</option>
    </select>
  </label>
  <label class="align-start">
    C2:
    <select>
      <option>This is start-aligned</option>
    </select>
  </label>
</div>

收缩 <select> 元素以适应嵌套的 flexbox

Shrink <select> element to fit in nested flexbox

css

flexbox

drop-down-menu