how to wrap around a list with a max-width container

Question

I have a list with a maximum size of 176px. If items overflow, i want them to wrap around the ul container. If they don't overflow, i want the ul to adjust to the width.

In my example, the first list overflows, and wraps around the max container size. Just what i want! The second list doesn't overflow. So the container needs to be more smaller, needs to adjust to the size of the list. I've added a max-width, with no success.

How do i make my second list container to be as width as the list is ?

ul {
  padding: 0;
  margin: 0;
}

.flagMenu {
  border: 1px solid red;
  max-width: 176px;
  white-space: wrap;
}

.flagMenu li {
  display: inline-block;
}

Robert Wade · Accepted Answer

Add display: inline-block to your ul element.

Unorderded List elements are block level elements by default, so naturally they will always appear on a new line, and take up the full available width. By changing that display property to inline-block, you can override that default behavior..

ul {
  padding: 0;
  margin: 0;
  width: auto;
  display: inline-block
}

.flagMenu {
  border: 1px solid red;
  max-width: 176px;
  width: auto;
  white-space: wrap;
}

.flagMenu li {
  display: inline-block;
}

how to wrap around a list with a max-width container

Answers (1)

Related Questions