Jonathan Jonathan - 1 year ago 43
CSS Question

Get divs to fill the line and don't push eachother down

Need help with a problem I can't solve myself.

I'm trying to make a div which is a menu, but when text get's to long it pushes the divs down and I need them to stay in plase and instead get more height.

See fiddle

display: inline-block;

* When you open the fiddle and resize the window to a smaller width the divs end ut beneath each other *

Is there some whay we can get the blue, red and green div on the same line but to increase height to fit the text instead? Like in the first example


Answer Source

Try this

.menu-title {
  width: 100%;
  display: -webkit-flex;
  display: flex;