<div> not using full bootstrap column space - html

Question

I am trying to make three buttons use the full width of a column.
The grid is 3 for the buttons and 9 for other components.
Here's a visual. So basically the buttons should also occupy the space that's marked with red, they should just use the whole column of 3.
Here's App.js where I imported the component:
<div className="container-full padding-0" style={{overflow:'hidden', overflowY:'hidden'}}>
<div className="row">
<div className="col-sm-3" style={{borderRight:"1px solid #000"}}>
<div className="row no-gutters mt-auto">
<div className="col-sm-3">
<COMPONENT1/>
</div>
<div className="col-sm-9">
<COMPONENT2/>
</div>
</div>
<COMPONENT3 store={store} style={{overflow:'hidden'}}/>
<COMPONENT4/>
<BUTTONS/> --------------------------> Here are the buttons
</div>
<div className="col-sm-9" style={{paddingRight: 0, paddingLeft: 0}}>
<COMPONENT6 = {store} style={{overflow:'hidden'}}/>
<br/>
<COMPONENT7/>
<COMPONENT8 store={store} clicked={this.clicked}/>
</div>
</div>
</div>
And buttons component:
<div className="row no-gutters mt-auto" style={{paddingTop:10}}>
<div className="col-sm-4">
<Button variant="raised" style={buttonStyle}>A</Button>
</div>
<div className="col-sm-4">
<Button variant="raised" style={buttonStyle}>B</Button>
</div>
<div className="col-sm-4">
<Button variant="raised" style={buttonStyle}>C</Button>
</div>
</div>
And the css for the buttons:
const buttonStyle = {
fontSize: 20,
textAlign: 'center',
display:'inline-block',
width:'100%',
height:100
}
EDIT: Here's a quick pic of the UI

Answer 1

Can you please try the following method:
Give below css rules to row no-gutters mt-auto:
style={{ display: 'flex', flex: 1, flexDirection: 'row' }}
It will work for sure !
Thanks