I've set up a basic row with two child columns: the sidebar column with className='col-md-2' and the mainbar column with className='col-md-10'. The parent row has a display:flex property to position the two children side by side.
<div style={{display:'flex'}} className='row'>
<div className='sidebar col-md-2'>
</div>
<div className='mainbar container-fluid border col-md-10' >
Home
</div>
</div>
Even though the total column widths add up to 12, the mainbar column isn't taking up the full width it should.
I'm hoping that the mainbar column will expand to occupy the entire remaining width of the screen.