user1292594 user1292594 - 1 year ago 105
CSS Question

Dropdown not resize

I am using flex grid, where row and column having property

Now I am creating a dropdown. Using property
. But it stretches to full width. Property
does not work.
I cannot remove the wrapper property

.wrapper {
flex-direction: column;
flex-grow: 0;
flex-shrink: 0;


Answer Source

So I changed the following in your code:

  1. Added align-self: flex-start to dropdown to not extend the whole width (this happens as default value of align-items or align-self is stretch)

  2. Changed min-width of dropdown from 100 to 180px to match that of ul

      align-self: flex-start;

Update codepen:

Let me know your thoughts on this, thanks!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download