I have developed a datepicker component using Vue and I am trying to integrate it into a standard Bootstrap column layout. However, I have encountered an issue where if the columns are smaller than the datepicker select window, the area outside the div becomes unclickable. This means that in the rightmost column, the dates cannot be selected.
Expanding the wrapping div enables clicking on the content, indicating that the problem lies with the datepicker overflowing beyond the boundary set by the wrapper div's max-width.
Is there a way to maintain the visual appearance shown in the image while also allowing user interactions on elements that extend beyond the wrapper?
https://i.sstatic.net/mcqxp.png
.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>