Как сделать, чтобы родительский div соответствовал его ширине ширине дочерних элементов с помощью flexbox?

Question

У меня есть гибкий родительский div с большим количеством элементов внутри, но родительская ширина не подходит для дочерних элементов. Как я могу это исправить?

По сути, я хочу отобразить двумерную двумерную матрицу с размерами, заданными пользователем, поэтому количество элементов внутри будет различаться, и будут некоторые разрывы строк, как показано ниже в коде, также дочерние элементыимеют фиксированную ширину и высоту.

.parent {
  display: flex;
  flex-wrap: wrap;
  background-color: silver;
  padding: 5px;
  border-radius: 10px;
}

.child {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: gold;
  margin: 5px;
}

.line-break {
  width: 100%;
}

<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='line-break'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

Вот еще и скрипта кода: https://jsfiddle.net/NoisyApple/4g8n3vfL/3/

Я ожидаю, что родитель автоматически установит свою ширину для элементов внутри него.

Answer 1

Вы можете сделать это с помощью простой inline-block конфигурации:

.parent {
  display:inline-block;
  background-color: silver;
  padding: 5px;  
  border-radius: 10px;
  font-size:0; /*to remove whitespace:*/
  margin:5px;
}

.child {
  height: 40px;
  width:40px;
  display:inline-block;
  vertical-align:top;
  border-radius: 10px;
  margin:5px;
  background-color: gold;
  font-size:initial;
}

.line-break {
  display:block;
}

<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='line-break'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>
<br>
<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='line-break'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>