Inner flexbox overrules flex-grow on outer flexbox - css

Question

// jsx in React.js
<Table>
<StyledTableBody>
{tradeInData.map(dataRow => {
return (
<FlexTableRow key={dataRow.productId}>
<StyledTableCell style={{flex : "3 1 auto !important"}}>
<ProductNameDiv>
<p>{dataRow.productName} ({dataRow.quantity})</p>
{showDeleteIcon && <DeleteOutline
style={{ cursor : "pointer" }}
/>}
</ProductNameDiv>
<SecondaryText>Id: {dataRow.productId}</SecondaryText>
</StyledTableCell>
<StyledTableCell style={{flex : "1 1 auto !important"}}
>{dataRow.price}</StyledTableCell>
</FlexTableRow>
)}
)}
</StyledTableBody>
</Table>
I want the flexbox on FlexTableRow to show the 2 elements below it at a 3:1 size ratio. You can see it's about 9:1 right now.
Looks like the flexbox on ProductNameDiv is consuming all the space. I can't set it to display: inline-block since it is also a flexbox.
I tried inline-block on the SecondaryText div and that seemed to overwrite the auto margins anyways.
What is the solution to this that will 1) preserve horizontal centering of text, 2) display the 2 children of FlexTableRow at roughly 3:1 horizontally?
// styled components
const StyledTableBody = styled(TableBody)`
* {
text-align: center;
}
`;
const FlexTableRow = styled(TableRow)`
display: flex;
> * {
border: 2px solid goldenrod !important;
}
`;
const StyledTableCell = styled(TableCell)`
border: 1px solid rgba(200, 200, 200, .6);
border-radius: 4px;
padding: 0 !important;
margin: 0 !important;
`;
const ProductNameDiv = styled.div`
border: 2px dashed lightgreen;
display: flex;
justify-content: center;
align-items: center;
`;
const SecondaryText = styled.p`
display: inline-block;
border: 2px dotted lightcoral;
font-style: italic;
font-size: .9rem;
margin: -12px auto 0 auto;
`;

Answer 1

As I was recreating the issue in a Codepen I found that Material UI's table elements caused the issue. I simply replaced them with standard HTML elements and the inner flexbox no longer fought against its own flex-grow setting:
const ReviewTable = styled.table`
max-width: 100vw;
`;
const FlexTableRow = styled.tr`
border: 1px solid rgba(200, 200, 200, .6);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
`;
const StyledTableCell = styled.td`
border-radius: 4px;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
`;
const ProductInfoCell = styled(StyledTableCell)`
flex-grow: 3;
`;
const ProductPriceCell = styled(StyledTableCell)`
flex-grow: 1;
margin: 0 auto;
padding: 5px 0 !important;
`;