Set initial select2 height but allow it to expand vertically

问题

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?

回答1:

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.

来源：https://stackoverflow.com/questions/45089073/set-initial-select2-height-but-allow-it-to-expand-vertically