div的大小随div包含的内容而自适应有哪些好方法？

Question

一个div，该div设置了text-align: center;，该div内包含很多div，通过css使其中一些div的大小随自己包含的内容而改变。不要显式设置这些div内的宽高大小

这个是我找到的一种设置DIV大小随内容自适应的方法的css代码。

  border: 1px solid black;
      display: inline-block;
      width: auto;
      height:auto;
      padding: 5px;

但这种有一个问题，应用该class的div，如果相邻在一起，就不会换行了，必须在前后加一个一个<br/>，或者是换行的div，才能实现换行。

如果把其中的display设置为block，虽然会换行，但从显示上看，div的width会填满。

div的大小随div包含的内容而自适应有哪些好方法？副作用越少越好

Answer 1

设置宽度为max-content，表示 元素内容固有的收缩（intrinsic）宽度

div{
    width: max-content
}

可以让一个块级元素自适应内容宽度，并且保持块级元素换行的特性

Answer 2

div容器自适应

• div根据内部的元素大小自适应，这种情况下应该给div设置宽高，应该直接沿用内部元素的宽高，靠内部宽高撑起容器大小。
• 如果需要给div设置一个最大值和最小值，可以使用css的min-height或者max-height属性，分别对应最小高度和最大高度。
• 内部元素自动换行可以给div设置一个宽度，根据宽度判断，如果内部元素超过div的宽，则换行处理，给div加flex-wrap: wrap即可;

Answer 3

最简单的就是使用 width 属性的一些关键字值，width - CSS | MDN。
比如说 fit-content、max-content 之类的。

但是 max-content 和 min-content 的折行会稍微有些问题，需要你去指定换行规则 或者 最大/小宽度