如何使用flexbox使父div的宽度适合子项的宽度？

Question

我有一个flex父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>