Search code examples
cssflexboxnavbarmarginexpand

How can I expand the empty margins on flex items?

enter image description here

The dark gray area is clickable but the blue margin has no action. How can I expand the rest of the smaller sized items to fill in the space?

div.scrollmenu {
    display:flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #333;
    overflow: auto;
    flex-wrap: nowrap;

}

div.scrollmenu a {
    display: flex;
    color: white;
    text-align: left;
    padding: 14px;
    text-decoration: none;
    margin: auto;
    min-width: 25%;
    max-width: 25%;
}
Solution

  • Add the align-items: stretch; property to your div.scrollmenu and tweak your code a bit. 

    div.scrollmenu {
  display:flex;
  /* align-items: stretch; */ /* redundant */
  background-color: #333;
  flex-wrap: nowrap;
}

div.scrollmenu a {
  display: flex;
  align-items: center;
  /* uncomment this if you want them to be centered horizontally  */
  /*justify-content: center;*/
  padding: 1 14px;
  color: white;
  text-align: left;
  text-decoration: none;
  flex: 1;
}

    Hope this helps.

    EDIT You don't even need align-items: stretch because I believe that's the default property since the result is the same even if you leave it out.