如何让Div根据内容自动拉伸适配宽度？

问题说明 #

不想给Div设置静态宽度，希望它能根据内部内容自动调整宽度。当前创建了包含3个列表的Div，已将ul元素设置为flex-direction: column; flex-wrap: wrap布局，需要实现当列表出现多列时，外层Div自动拉伸适配。

原始代码 #

CSS代码

* {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  height: 100vh;
  width: 100%;
  background-color: beige;
}

.link-list { /* 注意：HTML中外层容器类名为list，此处类名不匹配 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  background-color: aquamarine;
  display: flex;
  justify-content: space-around;
  height: 200px;
  max-width: 90%;
  gap: 30px;
}

.inner-list {
  width: fit-content;
  display: flex;
  flex-direction: column;
}

.inner-list ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  width: fit-content;
}

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="test.css">
</head>

<body>
  <div class="list">
    <div class="inner-list">
      <h6 class="inner-list-title">Title</h6>
      <ul>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
      </ul>
    </div>
    <div class="inner-list">
      <h6 class="inner-list-title">Title</h6>
      <ul>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">sark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark social </a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">sark</a></li>
        <li><a href="#">sark</a></li>
        <li><a href="#">sark</a></li>
        <li><a href="#">sark</a></li>
        <li><a href="#">sark</a></li>
        <li><a href="#">sark</a></li>
        <li><a href="#">sark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">sark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark social </a></li>
      </ul>
    </div>
    <div class="inner-list">
      <h6 class="inner-list-title">Title</h6>
      <ul>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
        <li><a href="#">Dark</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

解决方案 #

核心修改点：

• 修正外层容器类名不匹配问题
• 将外层容器设置为inline-flex，使其宽度由内部内容决定，而非默认占满父容器
• 调整ul的宽度设置，确保多列布局时能自动扩展宽度

修改后的CSS代码：

* {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  height: 100vh;
  width: 100%;
  background-color: beige;
  display: flex;
  justify-content: center;
  align-items: center; /* 改用flex布局居中，比绝对定位更简洁 */
}

.list {
  background-color: aquamarine;
  display: inline-flex; /* 关键：inline-flex让容器宽度适配内容 */
  justify-content: space-around;
  height: 200px;
  gap: 30px;
  padding: 10px; /* 可选：添加内边距让内容不贴边 */
}

.inner-list {
  width: fit-content;
  display: flex;
  flex-direction: column;
}

.inner-list ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  width: auto; /* 让ul宽度自动适配多列内容 */
  min-width: max-content; /* 确保宽度至少容纳单个列表项的最大宽度 */
}

效果说明 #

修改后，外层.list容器会根据内部三个.inner-list的总宽度自动调整，当中间的ul因为内容过多换行成多列时，ul会自动扩展宽度，外层容器也会随之拉伸，完美适配内容宽度，无需设置静态宽度。

内容的提问来源于stack exchange，提问作者osama ajaj