Внутренний flexbox отменяет flex-grow на внешнем flexbox

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>

Я хочу, чтобы flexbox на FlexTableRow показывал 2 элемента под ним в соотношении размеров 3: 1. Вы можете видеть, что сейчас это около 9: 1.

Похоже, что flexbox на ProductNameDiv занимает все пространство. Я не могу установить его на display: inline-block, так как это также flexbox.

Я попытался inline-block на SecondaryText div, и это все равно перезаписывало авто поля.

Как это можно решить, если 1) сохранить горизонтальное центрирование текста, 2) отобразить 2 дочерних элементов FlexTableRow примерно в 3: 1 по горизонтали?

// 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

Когда я воссоздал проблему в Codepen, я обнаружил, что элементы таблицы Material UI вызвали проблему. Я просто заменил их стандартными элементами HTML, и внутренняя flexbox больше не боролась с собственной настройкой flex-grow:

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;
`;