设置初始 select2 高度，但允许它垂直扩展答案

【问题标题】：Set initial select2 height but allow it to expand vertically设置初始 select2 高度，但允许它垂直扩展
【发布时间】：2017-07-13 19:03:36
【问题描述】：

我有一个 select2 框，我想允许它向上扩展，例如height: auto，但我也想设置它的初始高度，例如height: 34px.

我怎样才能做到这一点？如果我尝试同时设置它们，一个会覆盖另一个。我正在尝试让框根据需要垂直扩展而不添加滚动条。

我查看了其他问题，例如this，但我无法找到如何让大小增加但从初始值开始。我设置了一个min-height，但auto 并没有缩小到适合中间高度——实际上，我不确定它从哪里获得初始值。

这似乎是 Select2 独有的问题。 height: auto的起始尺寸应该是min-height吧？

【问题讨论】：

只有两个想法：1.可以尝试使用关键字!important到min-height:34px;或height:auto； 2. 您可以尝试使用“%”而不是“px”来确保格式保持不变。
是的，样式应用得很好。我似乎遇到了一个基本问题：显然，您不能两次设置相同的 CSS 属性。但我相信height:auto 最初应该将高度设置为min-height，而在这种情况下则不会。也许我必须设置height: 34px，然后使用 JavaScript/jQuery 监控框并根据需要展开。

标签： javascript jquery css jquery-select2

【解决方案1】：

使用min-height: 34px; 和height: auto; 应该可以工作。尝试运行代码 sn-p（这会在 3 秒后减小第二个 div 的大小）。

setTimeout(() => {
 $("#shrink").html("smaller text");
}, 3000);

.select2{
 min-height: 34px;
 height: auto;

 background-color: rgba(0,100,0,1);
 margin: 5px;
 border: 1px solid lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select2">Lorem ipsum dolor sit amet</div>
<div id="shrink" class="select2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

另一种解决方案是使用具有 grow 和 shrink 属性的 Flexbox。
在这种情况下，您需要将 .select2 包装到至少具有 display : flex 的包装 div（弹性容器）中，并将 shrink: 1; 和 grow: 1; 属性添加到 .select2 类（弹性项目）。当事情扩大或缩小时，这些将作为一个比例跟随。
See this code pen

.flex-wrapper{
  display: flex;
  flex-flow: row wrap;
}
.select2{
  flex-shrink: 1;
  flex-grow: 1;
  min-height: 34px;

  background-color: rgba(0,100,0,1);
  margin: 5px;
  border: 1px solid lime;
}

注意： A guide to flexbox 和 Flexbox Playground 是快速了解 flexbox 的好资源。

【讨论】：