user1292594 user1292594 - 1 month ago 10
CSS Question

Dropdown not resize

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

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

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


Demo: http://codepen.io/JEETPAL/pen/wzkopX

Answer

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

    .dropdown{
      align-self: flex-start;
      min-width:180px;
    }
    

Update codepen: http://codepen.io/anon/pen/jrRJVg

Let me know your thoughts on this, thanks!