如何强制下拉列表溢出表包装

Question

我一直在思考如何让下拉列表溢出它的容器，在我的情况下，它是一个表单元格。

下面是一个例子：

let content = document.querySelector('.content');
let abs = document.querySelector('.dropdown');
content.addEventListener('click', function () {
abs.classList.toggle('is-hidden');
});

.wrapper {
width: 500px;
overflow-x: auto;
overflow-y: visible;
}
.content {
width: 1000px;
height: 150px;
}
.content td {
position: relative;
border: 1px solid #ccc;
}
.dropdown {
position: absolute;
background: green;
top: 30px;
left: 10px;
width: 100px;
height: 300px;
}
.is-hidden {
display: none;
}

<div class="wrapper">
<table class="content">
<tr>
<td></td>
<td><div class="dropdown"></div></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>

上面提到的例子基本上模拟了bootstrap.table响应类。我的目标是使包装器水平滚动，但允许下拉列表垂直溢出。但是，即使我已经设置了溢出-y:visible，包装器也总是垂直滚动。

这能以某种方式实现吗？谢谢

Answer 1

用这个替换现有的CSS。

.dropdown {
position: fixed;
background: green;
width: 100px;
height: 300px;
}