How can I wrap the input if the chips takes 80% of its space

Question

I am using Chips in a input with material UI, I need to wrap the input down when chips takes most of the space (ex. 80%), and chips to be on top and wrapping!

<MDInput
                  value={inputValue}
                  error={!!errors.tags}
                  onChange={(event) => setInputValue(event.target.value)}
                  onKeyDown={handleKeyDown}
                  onBlur={handleBlurChanges}
                  label="Press enter to add tag"
                  name="tags"
                  helperText={errors?.tags}
                  InputProps={{
                    startAdornment: (
                      <InputAdornment
                        sx={{
                          minHeight: "40px",
                        }}
                        spacing={1}
                        position="start"
                      >
                        {chips.map((chip, index) => (
                          <Chip
                            sx={{
                              marginRight: "5px",
                            }}
                            key={index}
                            label={chip}
                            onDelete={handleDelete(chip)}
                            variant="outlined"
                            onBlur={handleBlurChanges}
                          />
                        ))}
                      </InputAdornment>
                    ),
                  }}
                />

enter image description here

Answer 1

This can fix your issue now, by adding sx={{marginLeft: '5px', marginRight: '5px', }} to sx prop of Chip. To get more space after tags

Here is the working example: demo