要让 div 内容撑开自身大小并实现自适应布局，可以通过以下几种方式来实现：
display: inline-block 或 display: inline-flex将 div 的 display 属性设置为 inline-block 或 inline-flex，这样 div 的宽度会根据内容自动调整。
div {
display: inline-block;
/* 或者 */
display: inline-flex;
}
width: fit-contentfit-content 可以让 div 的宽度根据内容自动调整。
div {
width: fit-content;
}
flexbox 布局使用 flexbox 布局可以让 div 的内容自适应布局。
.container {
display: flex;
flex-wrap: wrap;
}
div {
flex: 1 1 auto; /* 让 div 根据内容自动调整大小 */
}
grid 布局使用 grid 布局也可以实现自适应布局。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
div {
/* 让 div 根据内容自动调整大小 */
}
min-width 和 max-width通过设置 min-width 和 max-width，可以让 div 在一定的范围内自适应内容大小。
div {
min-width: 100px;
max-width: 100%;
}
padding 和 margin通过设置 padding 和 margin，可以让 div 的内容有足够的空间，从而撑开 div。
div {
padding: 10px;
margin: 10px;
}
box-sizing: border-box确保 padding 和 border 不会影响 div 的宽度计算。
div {
box-sizing: border-box;
}
white-space: nowrap如果内容是一行文本，可以使用 white-space: nowrap 来防止文本换行，从而让 div 的宽度根据文本内容自动调整。
div {
white-space: nowrap;
}
overflow: hidden 或 overflow: auto如果内容超出 div 的大小，可以使用 overflow 属性来控制内容的显示方式。
div {
overflow: hidden; /* 或者 overflow: auto */
}
min-height 和 max-height如果内容高度不确定，可以使用 min-height 和 max-height 来控制 div 的高度。
div {
min-height: 50px;
max-height: 200px;
}
以下是一个综合示例，展示了如何让 div 内容撑开自身大小并实现自适应布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应布局</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.box {
display: inline-block;
width: fit-content;
padding: 10px;
border: 1px solid #ccc;
box-sizing: border-box;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="container">
<div class="box">内容1</div>
<div class="box">内容2内容2内容2</div>
<div class="box">内容3内容3内容3内容3内容3</div>
</div>
</body>
</html>
在这个示例中，.box 会根据内容自动调整宽度，并且 .container 使用 flexbox 布局来实现自适应布局。