溢出：自动的div内select2的滚动条问题

Question

我正在编写一个大的表单，为了避免一个巨大的滚动，我把它划分并嵌套成带有overflow:auto的divs，这样我就可以把我的表单分解成几个窗口，每个窗口都有固定的高度和滚动条。

我试图使用select2插件，但是当select隐藏在我的一个窗口中时，我得到了一个滚动条来到达它，这是好的，但是我也得到了一个滚动条在主窗口上，而我恰恰是想避免这个。

我做了一个下面的片段，有什么线索吗？谢谢!

$('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/[email protected]/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Answer 1

感谢Fikri Muhammad Iqbal先生在GitHub上回答了我，这里有一个变通的方法。

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

在CSS中添加这一行就可以了。

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