0

I have this flexbox which holds a few menu items. When the screen width goes down I need these items to wrap. when the items wrap the container keeps a certain width to fit the wrapped items which leaves excess white space in my menu which I don't need. How do I force the flexbox to always be the width of the content.

Here's a screenshot of the menu with the excess space on the left

flexbox-menu

All the space on the left of 'Inspiratie' must be removed. Keep in mind This menu is placed in a flexbox with a searchbox that adjusts its width with the screen till a minimum width of 30%. If you need any code of the other elements I'm happy to provide.

This is the SCSS I have for the menu:

#menu-top-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.5em;
    column-gap: 1.5em;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
William Bruijntjes
  • 57
  • 7
  • Simply, don't use justify-content: flex-end. Instead use justify-content:space-between or space-around or space evenly. – Developer May 08 '23 at 14:49
  • Thing is, that isn't the styling I want. I need every wrapped list item to start on the right – William Bruijntjes May 09 '23 at 13:29
  • So you want items start from right on large screen. And won lower screen it should take full width and don't go to next line. Right? – Developer May 09 '23 at 13:33
  • If you explain correctly, I will make sure to give you your desired result. Currently I am little confused. – Developer May 09 '23 at 13:34
  • So if you look at the image, the way the elements wrap right now is perfect. It's that excess purple white space on the left that I dont't want. I just want that the width of the container to always be the width of the elements. So if an element gets wrapped, it must become as wide as the upper row of elements. – William Bruijntjes May 11 '23 at 13:46
  • So, currently the wrapping is right in the image. Only the left space is issue. So, why are you not using justify-content: space-between or space-around or space-evenly?? – Developer May 11 '23 at 14:52

1 Answers1

2

Web pages uses the box model to display elements. Basically, an element could occup full screen width or share screen space with others elements. When you set the #menu-top-menu to have the justify-content: flex-end; you are telling the element to squeeze the content at the end of the free space, which means that if the element occup full screen width, the content should be squeezed to the right of the screen.

To make the element fit the width to the wrapped items you could use the property width: fit-content, however, this would make the element be aligned to the start, not the end of the page as you can see on these images:

You could make the parent element of #menu-top-menu have the display: flex too but having the justify-content: flex-end instead of the current element. Here is the example.

Edit

Based on the message, I think you need a more complex solution to do this. This another answer might help you.

President James K. Polk
  • 40,516
  • 21
  • 95
  • 125
Nasc
  • 21
  • 3
  • Thanks for your response. This indeed makes the elements aligned to the left which isn't what i'm looking for. the menu-top-menu is a
      with
    • 's. This
        is wrapped by a
    – William Bruijntjes May 08 '23 at 12:36
  • 1
    I've linked another answer that I think might help you, check it out :) – Nasc May 08 '23 at 13:02