css - 内部 flexbox 否决外部 flexbox 上的 flex-grow

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>

我希望 FlexTableRow 上的 flexbox 以 3:1 的大小比例显示其下方的 2 个元素。您现在可以看到它大约是 9:1。

看起来 ProductNameDiv 上的 flexbox 占用了所有空间。我不能将它设置为 display: inline-block 因为它也是一个 flexbox。

我在 SecondaryText div 上尝试了 inline-block 并且它似乎无论如何都会覆盖自动边距。

有什么解决方案可以 1) 保持文本的水平居中，2) 以大约 3:1 的水平水平显示 FlexTableRow 的 2 个子项？

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