Question

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

我怎样才能做到这一点？如果我尝试设置它们，则一个覆盖另一个。我试图让盒子根据需要垂直展开而不添加滚动条。

我已经查看了this之类的其他问题，但我无处可寻找如何允许大小增加但从初始值开始。我设置了一个min-height，但auto没有缩小到适合中等高度 - 实际上，我不确定它在哪里获得初始值。

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

Answer 1

将min-height: 34px;与height: auto;一起使用应该有效。尝试运行代码片段（在3秒后减少第二个div的大小）。

＆＃13;

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

＆＃13;

.select2{
 min-height: 34px;
 height: auto;

 background-color: rgba(0,100,0,1);
 margin: 5px;
 border: 1px solid lime;
}

＆＃13;

<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>

＆＃13;

另一种解决方案是使用具有grow和shrink属性的Flexbox 在这种情况下，您需要将.select2包装到至少包含display : flex的包装器div（Flex容器）中，并向{shrink: 1;添加grow: 1;和.select2属性1}}类（弹性项）。当事情发展或缩小时，这些将作为一个跟随的比例 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;
}

NB： A guide to flexbox和Flexbox Playground是使用flexbox加速的好资源。

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

1 个答案: