Dash bootstrap navbar and Dropdown alignment issues

I am using dash-bootstrap-components. I am trying to understand how Row and Col work, but it is a struggle.

Consider the following code:

options = [{'label': num, 'value': num} for num in range(int(4e12), int(4e12) + 30)]

def get_layout():
    """Get the application layout."""

    memo_selector = dcc.Dropdown(
            value=4e12 + 1,

    grid1 = dbc.Row(
    navbar1 = dbc.Navbar(
    return dbc.Container(

The width occupied by the dropdown is too small. I don’t want to use dropdown menu offered by bootstrap, since i also need to be able to type in the text as well as select.

How can I control the width of the core dropdown when inside a bootstrap Row, Col etc. for example, how can I make the dropdown in above example occupy the full width, right now it just occupies a very small left corner.

I have tried changing the width attribute in Col, True, ‘auto’, 12 none of it works to increase the width.

Adding className='flex-grow-1' to the Row element solved the issue.