I am currently working with a front-end framework based on flexbox called Material-UI, and I have noticed that the layout of certain components, particularly the quantity control elements, appears to be different even though they all share the same styling and code.
Here is an example:
I believe this issue is related to the flexbox model rather than being a problem with Material UI. Any insights on what could be causing this discrepancy? Please note that all styling is applied inline.
Code Sample
Below is the code snippet for each <Card>, where each card receives a listing as a prop containing the necessary data for rendering:
<Card style={{ display: "flex", height: "13em" }}>
<CardMedia title={listing.productTitle}>
<img src={listing.mainImgUrl} style={{ width: "13em" }} />
</CardMedia>
<Box display="flex" flexDirection="column">
<CardContent style={{ flex: "1 0 auto" }}>
<Typography component="h6">{listing.productTitle}</Typography>
<Typography variant="subtitle1" color="textSecondary">
by {listing.creatorUsername.length > 16 ? `${listing.creatorUsername.substring(0, 13)}...` : listing.creatorUsername}
</Typography>
</CardContent>
<Box display="flex" alignItems="center" justifyContent="flex-end" mb={1}>
<Box display='flex' alignItems='center'>
<Box mr={2}>
<Typography variant='body2'>${localQuantity * listing.price}</Typography>
</Box>
<Select
name="quantity"
value={localQuantity}
onChange={handleChange}
variant="outlined"
disabled={disabled.quantity}
>
{getQuantityOptions(listing.numAvailable)}
</Select>
<IconButton>
<DeleteOutline />
</IconButton>
</Box>
</Box>
</Box>
</Card>
Your assistance is greatly appreciated!