Firefox中的水平多选

Question

我正在尝试构建适用于所有现代浏览器的多选项。 问题是它在Firefox中没有像预期的那样工作。 在Chrome中，溢出框会突破到新行，但在Firefox中，溢出会保持隐藏状态。

我知道它适用于Chrome，所以如果你使用Chrome，那么你会在Firefox中看到我想要的结果。

任何人都知道解决方案吗？

＆＃13;

＆＃13;

* {
    box-sizing: border-box;
}
#data {
    overflow:hidden;
    padding:0;
	width:100vw;
}
select {
	padding:0;
	padding-left:1px;
	border:none;
	background-color:#eee;
	width:100%;
	white-space: normal;
	height:200px;
}
option {
	height:100px;
	width:100px;
	border:1px solid #000;
	background-color:white;
	margin-left:-1px;
	display:inline-block;
}

＆＃13;

<form>
<div id="data">
	<select multiple size="1">
		<option>jan</option>
		<option>feb</option>
		<option>mar</option>
		<option>apr</option>
		<option>maj</option>
		<option>jun</option>
		<option>jul</option>
		<option>aug</option>
		<option>sep</option>
		<option>okt</option>
		<option>nov</option>
		<option>dec</option>
	</select>
</div>

</form>

＆＃13;

＆＃13;

＆＃13;

链接到JSFiddle

Answer 1

我做了一些谷歌研究，它似乎不是任何解决方案。 它只是Firefox的工作方式。