在卡座内以相同大小和水平滚动动态增长卡

Question

我有一个卡片组，该卡片组将动态添加卡片。并且它应该可以水平滚动。

我希望添加到卡座中的卡具有固定的大小，并且随着卡座内卡数量的增加，卡座应可水平滚动。

这是我的CardDeck代码。单击加号按钮后，会将卡片添加到卡片组中。

<CardDeck
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    justifyContent: "center",
                    width: "200em",
                    overflowX: "auto",
                    flexWrap: "nowrap"
                  }}
                >
                  {this.state.vehicleDetailsArr.length > 0 &&
                    this.state.vehicleDetailsArr.map(data => (
                      <Card style={{ flex: 1 }}>
                        <CardHeader tag="h6">Vehicle</CardHeader>
                        <CardBody>
                          <Row>
                            <Col>
                              <Downshift id="downshift-simple">
                                {({
                                  getInputProps,
                                  getItemProps,
                                  getLabelProps,
                                  getMenuProps,
                                  highlightedIndex,
                                  inputValue,
                                  isOpen,
                                  selectedItem
                                }) => {
                                  const {
                                    onBlur,
                                    onFocus,
                                    ...inputProps
                                  } = getInputProps({
                                    placeholder: "Search for a brand"
                                  });

                                  return (
                                    <div>
                                      {renderInput({
                                        fullWidth: true,
                                        label: "Car Make",
                                        InputLabelProps: getLabelProps({
                                          shrink: true
                                        }),
                                        InputProps: { onBlur, onFocus },
                                        inputProps
                                      })}

                                      <div {...getMenuProps()}>
                                        {isOpen ? (
                                          <Paper square>
                                            {getSuggestions(inputValue).map(
                                              (suggestion, index) =>
                                                renderSuggestion({
                                                  suggestion,
                                                  index,
                                                  itemProps: getItemProps({
                                                    item: suggestion.label
                                                  }),
                                                  highlightedIndex,
                                                  selectedItem
                                                })
                                            )}
                                          </Paper>
                                        ) : null}
                                      </div>
                                    </div>
                                  );
                                }}
                              </Downshift>
                            </Col>
                          </Row>
                          <Row>
                            <Col>
                              <TextField
                                id="vehicleDetail.carModel"
                                name="vehicleDetail.carModel"
                                label="Model"
                                placeholder="Car Model"
                                value={data.carModel}
                                onChange={this.handleTextFieldChange}
                                margin="normal"
                              />
                            </Col>
                          </Row>

                          <br />
                          <Row>
                            <Col>
                              <Button
                                size="Sm"
                                outline
                                color="secondary"
                                onClick={this.handleColorPickerClick}
                              >
                                <i class="fas fa-palette" />
                              </Button>

                              <div>
                                {data.toggleColorPalette && (
                                  <CompactPicker color={data.carColor} />
                                )}
                              </div>
                            </Col>
                          </Row>
                          <Row>
                            <Col>
                              <TextField
                                id="vehicleDetail.licensePlateNum"
                                name="vehicleDetail.licensePlateNum"
                                label="License plate number"
                                value={data.carLicensePlateNum}
                                onChange={this.handleTextFieldChange}
                                margin="normal"
                              />
                            </Col>
                          </Row>
                        </CardBody>
                        <CardFooter>
                          <Button size="sm" outline color="danger">
                            <i className="fas fa-edit" />
                          </Button>
                        </CardFooter>
                      </Card>
                    ))}
                  <Card style={{ flex: 1 }}>
                    <CardBody>
                      <Button size="lg" outline color="secondary">
                        <i class="fas fa-plus fa-9x" />
                      </Button>
                    </CardBody>
                  </Card>
                </CardDeck>

目前，实现还不完全正确。最初的两张Card的宽度非常大（因为carddeck的大小设置为200em。但是，如果我删除宽度，carddeck的水平滚动将不会启用）。

我添加的卡越多，它们在200em范围内进行调整。

有什么方法可以动态添加固定大小的卡片并在卡片组中启用滚动功能？