How to stretch the card according to the content displayed in reactjs?

Question

I'm new to material UI framework, i want to stretch the grid accordingly displayed in the content. I couldn't able to do that. Can anyone help me in this?

<Card>
        <CardHeader
          avatar={<Avatar aria-label="recipe">S</Avatar>}
          title={
            <>
              <InputBase placeholder="Search Google Maps" margin="normal" />
              <IconButton type="submit" aria-label="search">
                <SearchIcon />
              </IconButton>
            </>
          }
        />
        <Divider />
        <CardContent
          style={{ overflow: "scroll" }}
          className={classes.contentHeight}
          id="chatList"
        >
          <div>
            <Message isSender content="Hello" />
            {this.state.data.map(item => {
              if (item.isSender) {
                return (
                  <Message isSender name="Sanjana" content={item.content} />
                );
              }
              return <Message name="Sanjana" content={item.content} />;
            })}
          </div>
        </CardContent>
        <Divider />
        <CardActions>
          <Paper className={classes.contentPaper}>
            <Input
              margin="dense"
              className={classes.input}
              placeholder="Enter a Message"
              disableUnderline
            />
          </Paper>
        </CardActions>
      </Card>

Can anyone help me in this query?

Thanks in advance!

Answer 1

To make the content to stretch full width, you can use width: "fit-content" and assign your width value of 100 to minWidth: 100.

So your card will look like,

        <Card
          style={{
            backgroundColor: "#eee",
            float: isSender ? "right" : "left",
            padding: 16,
            diaplay: "block",
            minHeight: 40,
            width: "fit-content",
            minWidth: 100,
            display: "flex",
            alignItems: "center",
            textAlign: "center"
          }}
        >

To make the content left align inside card, you can assign style to Grid like,

 <Grid style={{ paddingBottom: 8, textAlign: "left" }} item xs={12}>
        <span>{name}</span>
 </Grid>

Forked sandbox

Answer 2

Remove width: 100

<Card
  style={{
    backgroundColor: "#eee",
    float: isSender ? "right" : "left",
    padding: 16,
    minHeight: 40,
    width: 100,
    display: "flex",
    alignItems: "center",
    textAlign: "center"
  }}
>
  {content}
</Card>

should be

<Card
  style={{
    backgroundColor: "#eee",
    float: isSender ? "right" : "left",
    padding: 16,
    minHeight: 40,
    display: "flex",
    alignItems: "center",
    textAlign: "center"
  }}
>
  {content}
</Card>

because the width: 100 gives it a width of 100px.