Question 43187 in Html Question posted in
Some basic documentation can be found here.

How Can I make a Div Stretch According To Content – Html

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

Tags:

2

Answers


  1. 0

    You can do it using display: inline-table; instead of flex and width: 30%;

    .inner-list{
    width: 30%;
    display: inline-table;
}

    *{
    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: 30%;
    display: inline-table;
}

.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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search