当容器包含绝对定位的内容时，如何使容器仅在 x 轴上溢出?

Question

我有一个自定义下拉框，它对项目列表使用绝对定位。它位于表格行内。当视口不够宽以包含表格时，我希望它自动在 X 轴上滚动。

我遇到的问题是，根据规范，如果我将overflow-x: auto;添加到父容器并尝试设置overflow-y: visible;它将此轴设置为自动。这会导致 Y 轴滚动。

例： https://codepen.io/afisher88/pen/mdJybaY

.HTML

<div class="outer-wrapper">
<div class="inner-wrapper">
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>
<div class="custom-dropdown">
<button id="btn" type="button">Toggle dropdown!</button>
<ul>
<li>Option</li>
<li>Option</li>
<li>Option</li>
<li>Option</li>
<li>Option</li>
</ul>        
</div>
</td>
<td><input type="text"/></td>              
<td>WFaouhfgeaouhgaeoghuaegoauehgaoeguhaegouhaegoaehugaeoguhaeg</td>
</tr>
</tbody>
</table>
</div>
</div>

南海

.outer-wrapper {
background: #f2f2f2;
width: 500px;
margin: 0 auto;
overflow-x: auto;
overflow-y: visible;
}
.custom-dropdown {
position: relative;
width: 200px;
background: #fff;
&.open {
ul {
display: block;
}
}
button {
display: block;
border: 0;
box-shadow: 0;
background: #fff;
padding: 5px;
height: 30px;
}
ul {
position: absolute;
display: none;
top: 14px;
left: 0;
width: 100%;
background: #fff;
}
}

Answer 1

编辑：要回答有关填充和中断定位的评论，因为您使用的是 Sass，请为容器的填充设置一个变量(至少在使用底部填充的地方(并在以下transform中使用它。

• 从.custom-dropdown中删除position: relative;
• 从.custom-dropdown中删除left: 0
• 从.custom-dropdown ul中删除top: 14px;
• 添加transform: translateY(-$padding)其中$padding是容器填充(如果有(的 Sass 变量。
• 将width: 100%;重构为.custom-dropdown ul中的width: 10em;(以匹配单元格宽度((个人首选项(

我还在ul周围添加了一个浅色边框，以添加一些 UX。

const btn = document.getElementById('btn');
console.log(btn);

btn.addEventListener('click', (e) => {
e.target.parentElement.classList.toggle('open');
});

.outer-wrapper {
background: #f2f2f2;
width: 500px;
margin: 0 auto;
overflow-x: auto;
overflow-y: visible;
padding: 1em; /* Sass variable simulation */
}
.custom-dropdown {
/*position: relative;*/
width: 200px;
background: #fff;
}
.custom-dropdown.open ul {
display: block;
z-index: 10;
}

.custom-dropdown button {
display: block;
border: 0;
box-shadow: 0;
background: #fff;
padding: 5px;
height: 30px;
}

.custom-dropdown ul {
position: absolute;
display: none;
/* left: 0; */
width: 10em;
background: #fff;
border: 1px solid lightgrey;
transform: translateY(-1em); /* Sass variable simulation */
}

<div class="outer-wrapper">
<div class="inner-wrapper">
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>
<div class="custom-dropdown">
<button id="btn" type="button">Toggle dropdown!</button>
<ul>
<li>Option</li>
<li>Option</li>
<li>Option</li>
<li>Option</li>
<li>Option</li>
</ul>        
</div>
</td>
<td><input type="text"/></td>              
<td>WFaouhfgeaouhgaeoghuaegoauehgaoeguhaegouhaegoaehugaeoguhaeg</td>
</tr>
</tbody>
</table>
</div>
</div>