Размер flexbox div в соответствии с размером содержимого

Question

У меня есть flexbox, который выглядит так, и я пытаюсь удалить все лишнее пространство в конце содержимого.

Мне бы хотелось, чтобы размер был примерно таким, как ниже, где ширина соответствует размеру содержимого, а не шире, чем нужно.

Я также хочу, чтобы у него было свойство, при котором ширина будет увеличиваться так, как необходимо для размещения содержимого внутри, а затем при необходимости переносится на следующую строку.

И, конечно, я бы хотел, чтобы дочерние элементы имели разумный размер, чтобы соответствовать их содержимому (т. Е. Метки, select и т. Д. c. Достаточно широки, чтобы отображать их содержимое.

Вот простое jsfiddle того, что у меня сейчас https://jsfiddle.net/6xLr9qfu/1/. css также показано ниже:

#inner {
  background: lightskyblue;
  border-radius: 10px;
  display: flex;
  flex-flow: row wrap;
}

#inner > * {
  margin: 5px;
}

Answer 1

Попробуйте добавить display:inline-block; на #app, это позволит сохранить содержимое до его ширины и увеличить ширину при увеличении данных.

Вы можете проверить, удалив содержимое, и вы увидите разницу.

вот скрипка , если вы хотите поиграть.

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  display: inline-block;
}

#inner {
  background: lightskyblue;
  border-radius: 10px;
  display: flex;
  flex-flow: row wrap;
}

#inner>* {
  margin: 5px;
}

<div id="app">
  <div id="inner">
    <label>Some text</label>
    <select id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <select id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <select id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <select id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <select id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <select id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <select id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
  </div>
</div>

Answer 2

, чтобы элемент flex не занимал всю ширину, используйте display: inline-flex;, и он будет вести себя как элемент <span>, не блочный, но с возможностями flex.

#inner {
  background: lightskyblue;
  border-radius: 10px;

  display: inline-flex; 

  flex-flow: row wrap;
}