I have never encountered this issue before, although I do have working examples. It could be related to how the content has been framed.
.section-wrapper {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 0;
display: block;
}
select {
width: 100%;
padding: 15px;
display: inline-block;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 0;
color: black;
background: red;
outline: none;
appearance: none;
box-sizing: border-box;
}
.section-content {
width: 100%;
min-height: 250px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border: solid red 5px;
padding: 10px;
box-sizing: border-box;
}<h1>Scroll down to ensure that you get the scrollable dropdown</h1>
<p>Notice how the dropdown overhangs</p>
<br><br><br><br><br><br><br><br><br><br>
...
The issue may lie with the optgroup label, especially when adding more options or using different text styles.
There is a scrollbar alignment problem within the dropdown; check the correct appearance https://i.sstatic.net/1XAEr.png
To fix the scrollbar from exceeding the width of the dropdown and prevent it from appearing unstyled, the code might need some adjustments.
<p>The issue arises when there are only two options in one group.</p>
<select id="monthlystatisticsmenu">
<option value="Not Selected" disabled="" selected="">Please select a month to view statistics for</option>
<optgroup label="2021">
...