设置初始select2高度，但允许其垂直扩展 [英] Set initial select2 height but allow it to expand vertically

问题描述

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

我该怎么做?如果我尝试同时设置两者，则一个优先于另一个.我正在尝试使框根据需要垂直展开，而不添加滚动条.

我查看了其他问题，例如 this ，但我无处可寻，如何让大小增加，但要从初始值开始.我已经设置了min-height，但是auto不会缩小以适合中等高度—实际上，我不确定它从哪里获得初始值.

似乎这是Select2独有的问题. height: auto的起始大小应该为min-height，对吧?

解决方案

将min-height: 34px;与height: auto;一起使用应该可以. 尝试运行代码段(这会在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> 

另一种解决方案是将Flexbox与grow和shrink属性一起使用.
在这种情况下，您需要将.select2包装到至少包含display : flex的包装div(flex容器)中，并向.select2类(flex项目)添加shrink: 1;和grow: 1;属性.当事物增长或收缩时，这些将作为跟随的比例.
参见此代码笔

.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 :指南flexbox 和 Flexbox游乐场是很好的资源，可让您快速掌握flexbox. /p>

I have a select2 box that I want to allow to expand upward, e.g. height: auto, but I also want to set its initial height, e.g. height: 34px.

How can I accomplish this? If I try to set both of them, one overrides the other. I'm trying to have the box expand vertically as needed without adding a scrollbar.

I've looked at other questions like this, but nowhere can I find how to allow the size to increase but start at an initial value. I've set a min-height, but auto doesn't shrink to fit mid-height — I'm not sure where it's getting the initial value, actually.

It seems like it's a problem exclusive to Select2. height: auto's starting size should be min-height, right?

解决方案

Using min-height: 34px; with height: auto; should work. Try running the code snippet (which reduces the size of the second div after 3 seconds).

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>

Another solution is using Flexbox with the grow and shrink properties.
In this case, you need to wrap your .select2 into a wrapper div (the flex container) with at least display : flex and add a shrink: 1; and grow: 1; properties to the .select2 classes (the flex items). These will act as a proportion to follow when things grow or shrink.
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 and Flexbox Playground are good resources to get up to speed with flexbox.

这篇关于设置初始select2高度，但允许其垂直扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！