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

Solution 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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="select2">Lorem ipsum dolor sit amet</div><divid="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.