CODEWITHSUNDEEP
htmlcssflexbox
TheFrost
TheFrost

Reputation: 1265

Make column content width, not width: 100%

I put flex-direction: column and flex-wrap: wrap for ul to achieve columns.

If ul splits elements into few columns, they have width of the widest li content in the column. But if there is only one column, it has 100% width.

What I want is to have this one column the size of its content.

/* boilerplate */

* {
  margin: 0;
  padding: 0;
}

div {
  max-height: 100px;
  background-color: #cacaca;
}

ul {
  list-style-type: none;
  height: 100px;
  background-color: #dadada;
}

li {
  margin-right: 10px;
  background-color: #eaeaea;
}


/* actual code */

div {}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
}

li {}
<div>
  <ul>
    <li>normal</li>
    <li>x</li>
    <li>y</li>
    <li>z</li>
    <li>short</li>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>wiiiiiiiiiiiiiiide</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>normal</li>
    <li>just two</li>
  </ul>
</div>

<div>
  <ul>
    <li>why</li>
    <li>full</li>
    <li>width?</li>
  </ul>
</div>

https://codepen.io/anon/pen/eRYjLd

Upvotes: 1

Views: 65

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371231

Instead of display: flex use display: inline-flex.

This switches the container from block-level (which takes the full width of its parent) to inline-level (which takes the width of its content).

This sizing behavior is similar to display: block vs. display: inline-block.

OR

Make the parent div a flex container with justify-content: center.

This confines the ul flex container to the width of the flex item, whose default is flex-basis: auto (content width).

/* boilerplate */

* {
  margin: 0;
  padding: 0;
}

div {
  max-height: 100px;
  background-color: #cacaca;
}

ul {
  list-style-type: none;
  height: 100px;
  background-color: #dadada;
}

li {
  margin-right: 10px;
  background-color: #eaeaea;
}


/* actual code */

div {
  display: flex;             /* NEW */
  justify-content: center;   /* NEW */
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
}

li {}
<div>
  <ul>
    <li>normal</li>
    <li>x</li>
    <li>y</li>
    <li>z</li>
    <li>short</li>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>wiiiiiiiiiiiiiiide</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>normal</li>
    <li>just two</li>
  </ul>
</div>

<div>
  <ul>
    <li>why</li>
    <li>full</li>
    <li>width?</li>
  </ul>
</div>

Upvotes: 1

Related Questions