CODEWITHSUNDEEP
htmlcss
Marco
Marco

Reputation: 2737

CSS: max-width won't wrap around an absolute container

I've been playing with this one for hours, with no success.

I have a top menu with submenus (that contains a popup menu).

In one of my popup menus, i need the container to be maximum 170 pixels width and all of the items to wrap around that width. For some reason they don't wrap up.

I've reproduced the exact menu in a fiddle. Notice the submenu COUNTRY. It contains a popup with flags, but they don't wrap around

https://jsfiddle.net/h81y2t0L/

I've added attributes like a width, a min-width, a white-space with no success

.flagMenu {
  max-width: 170px;
  /* white-space: normal; */
}

.flagMenu li {
  display: inline-block;
}

How do i wrap around the flags in the container?

Upvotes: 2

Views: 75

Answers (1)

Miro
Miro

Reputation: 8650

To wrap the inline-blocks you need to define a container width - but since you don't want an exact width, use width: max-content; That way the width will be equal to the width of the content but the max-width will stop it from growing further.

.flagMenu {
  max-width: 170px;
  white-space: normal;
  width: max-content;
}

Demo

Upvotes: 3

Related Questions