div内select2的滚动条问题，溢出：auto答案

【问题标题】：Scrollbar problem with select2 inside div with overflow:autodiv内select2的滚动条问题，溢出：auto
【发布时间】：2020-03-18 21:20:50
【问题描述】：

我正在编写一个大表单，为了避免出现一个巨大的滚动，我使用overflow:auto 将它分割并嵌套到div 中。这样我就可以将我的表单分解成几个窗口，每个窗口都有固定的高度和滚动条。

I'm trying to use the select2 plugin, but when the select is hidden in one of my windows, I'm getting a scrollbar to reach it, which is ok, but I'm also getting a scrollbar on the main窗口，而我正是试图避免这种情况。

我在下面做了一个sn-p，有什么线索吗？谢谢！

$('select[name="test"]').select2();

.wrapper {
  height: 100vh;
  width: 300px;
  background-color: #ddd;
  overflow: auto;
}
.scrollingBlock {
  height: 100%;
  width: 75%;
  background-color: #ccc;
}
.bigElement {
  height: 150%;
  width: 75%;
  background-color: #c00;
}
.elementWithSelect {
  width: 75%;
  background-color: #0c0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet"/>
<div class="wrapper">
	<div class="scrollingBlock">
    	<div class="bigElement"></div>
    	<div class="elementWithSelect">
			<div class="selectWrapper">
				<select name="test">
					<option value="c1">Choice 1</option>
					<option value="c2">Choice 2</option>
					<option value="c3">Choice 3</option>
					<option value="c4">Choice 4</option>
					<option value="c5">Choice 5</option>
				</select>
			</div>
		</div>
	</div>
</div>

【问题讨论】：

标签： css jquery-select2

【解决方案1】：

感谢 Fikri Muhammad Iqbal 先生在 GitHub 上回答我，这里有一个解决方法：

在某些容器上，使原始选择隐藏的 .select2-hidden-accessible 的 css 被推到位置的边缘：相对于其相对容器的绝对位置

将这一行添加到 CSS 中就可以了：

.select2-hidden-accessible { position: fixed !important; }

【讨论】：