Dash应用中dmc.DateRangePicker日历日期超出组件容器问题求助

大家好，我在自己的Dash应用里遇到个小麻烦——日历的日期内容超出了组件的容器范围，看起来排版特别混乱。具体表现是日历控件里的日期元素没有被约束在组件边框内，直接跑到外面去了。

我是通过dmc.DateRangePicker组件实现的日期选择功能，代码如下：

dmc.DateRangePicker(
    id='calendar_id',
    style={"width": "100%"},
    placeholder='Date Range...'
),

我的应用布局大致是这样的（已经做了精简，去掉了无关内容）：

layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.Label(
                        'Some Label:',
                        className='bold-text'
                    ),
                    dcc.Dropdown(
                        id='dropdown_id',
                        options=[{'label': '示例选项', 'value': 'opt1'}]
                    ),
                    # 日期选择器就放在这个CardBody的布局里
                    dmc.DateRangePicker(
                        id='calendar_id',
                        style={"width": "100%"},
                        placeholder='Date Range...'
                    ),
                ])
            ])
        ])
    ])
])

有没有朋友遇到过类似的问题呀？想请教一下怎么解决这个日历日期溢出容器的问题呢？

备注：内容来源于stack exchange，提问作者kilag