超出最大宽度的无法点击的内容

Question

我在 Vue 中创建了一个日期选择器组件，我试图在标准 Bootstrap 列布局中使用它。问题是当列小于日期选择器的 select window 时，div 之外的任何区域都不可点击。所以在下图中，最右边一列的所有日期都不能selected。

加宽包装 div 确实允许点击内容，所以我知道这与日期选择器溢出超过包装 divs max-width 设置的边界有关。

是否有任何方法仍然可以实现图像中的视觉效果，但允许在溢出到包装器外部的元素上检测到用户交互？

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

@media (min-width: 576px){
.col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
}}

.datepicker {
width: 300px;
}

<div data-v-44ab1ae6="" class="row">
<div data-v-44ab1ae6="" class="col-sm-3 col-12">
<div class="datepicker"></div>
</div>
</div>

Answer 1

将 position: relative 和 z-index 应用于日期选择器 div 应将 div 置于其他内容之上，同时保持溢出内容可点击。

我使用 bootstrap-vue 作为标记，但最终结果应该是相同的，因为它们都使用相同的 bootstrap CSS.

演示： https://codepen.io/Hiws/pen/zgRmOV

超出最大宽度的无法点击的内容

Unclickable Content Outside Max-Width

css

overflow

flexbox

bootstrap-4