How Can I make a Div Stretch According To Content

i have a problem with auto width for a div, i don't want to give the div a static width i want it to set its width automatically to fit the content inside it. i am trying to create a div with 3 lists, i made the lists (ul element) flex - column - wrap i want the div stretch to fit lists if a list has more than column automatically.

This is my code snippet:

* {
  margin: 0;
  padding: 0;
}

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

.link-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;
}

<!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>

i want to make like this

Solution

Flexbox has some known bugs, and one of them occurs when using flex-flow: column wrap. Some browsers don't properly size the container based on its content, which can result in unwanted overflow. To work around this, you can set the container to display: flex and flex-direction: row with a static height, like this:

When using flex-flow: column wrap, some browsers do not properly size the container based on its content, and there is unwanted overflow.

reference: https://github.com/philipwalton/flexbugs#flexbug-14

Workaround

To resolve the flex: column behavior, you can use flex-flow: row wrap instead (note the use of row instead of column). To fake the column behavior, you can update the container's writing mode (and reset it on the items), like this:

.list {
  display: flex;
  flex-direction: row;
  height: 200px;
}

and resolve flex: column by using flex-flow: row wrap (note row instead of column) and fake the column behavior by updating the container's writing mode (and reseting it on the items).

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

.inner-list ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 100%;
  width: fit-content;
  writing-mode: vertical-lr;
}

.inner-list li {
  writing-mode: horizontal-tb;
  padding: 0 6px;
}

Example

Here's a full sample code and demo that should work for you.

* {
  margin: 0;
  padding: 0;
}

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

.list {
  display: flex;
  flex-direction: row;
  height: 200px;
}

.link-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: row;
  flex-wrap: wrap;
  height: 100%;
  width: fit-content;
  writing-mode: vertical-lr;
}

.inner-list li {
  writing-mode: horizontal-tb;
  padding: 0 6px;
}

<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>