Как выровнять выпадающее меню от вертикальной линии к горизонтальной линии?

Question

• Я пытаюсь выровнять выпадающее меню по горизонтали, но сейчас оно по вертикали.
• , поэтому я взял пример flexbox из школ w3 и внес изменения.
• в демо-коде работает нормально, где вы можете видеть 1,2,3,4 по горизонтали.
• где, как если бы я включил эти классы в свой тег slect, его нарушение. - Я отладил и обнаружил, что они дали flexgrow корневому классу.
• даже если удалить его не работает.
• вы можете сказать мне, как это исправить, чтобы вБудущее я исправлю сам.
• предоставив мой соответствующий фрагмент кода и снэдбокс ниже.
• весь мой код находится в AutoCompleteComponent.js

https://codesandbox.io/s/4x9lw9qrmx

queryBuilderContainer: {
    display: "flex",
    flexWrap: "wrap",
    backgroundColor: "DodgerBlue ",
    border: "1px solid red "
    // width: 100,

    // display: flex;
    // flex-wrap: wrap;
    // background-color: DodgerBlue;
  },
  queryBuilderContainerItem: {
    border: "1px solid black ",
    backgroundColor: "red ",
    width: 100,
    margin: 10,
    textAlign: "center",
    //lineHeight: 75,
    fontSize: 30
  },
  root: {
    flexGrow: 1,
    height: 250
  },
  input: {
    display: "flex",
    padding: 0
  },
  valueContainer: {
    display: "flex",
    flexWrap: "wrap",
    flex: 1,
    alignItems: "center",
    overflow: "hidden"
  },

nossr0901

  <NoSsr className={classes.queryBuilderContainer}>
            <Select
              className={classes.queryBuilderContainerItem}
              classes={classes}
              styles={selectStyles}
              options={this.state.suggestions}
              components={components}
              value={this.state.single}
              onChange={this.handleChange("network")}
              placeholder="Search a to do"
            />
            <Select
              className={classes.queryBuilderContainerItem}
              classes={classes}
              styles={selectStyles}
              options={this.state.nameSuggestions}
              components={components}
              value={this.state.names}
              onChange={this.handleChange("location")}
              placeholder="Search name"
            />
            <div className={classes.divider} />
            <Select
              className={classes.queryBuilderContainerItem}
              classes={classes}
              styles={selectStyles}
              options={this.state.operatorSuggestions}
              components={components}
              value={this.state.operator}
              onChange={this.handleChange("operator")}
              placeholder="Search name"
            />
            <div className={classes.divider} />
            <button onClick={e => this.props.removeSeleted(this.props.index)}>
              Remove
            </button>
          </NoSsr>

Answer 1

Проблема у вас в div родительском элементе NoSsr компонента .
Этот родительский div должен быть с className: queryBuilderContainer.
Например, тогда вам не нужно помещать класс в NoSsr.

См. Код ниже:

<div className={classes.queryBuilderContainer}>
      <NoSsr>
        <Select className={classes.queryBuilderContainerItem}...>
        <Select className={classes.queryBuilderContainerItem}...>
        ...
      </NoSsr>
 </div>