CODEWITHSUNDEEP
htmlcss
LazioTibijczyk
LazioTibijczyk

Reputation: 1937

Autofill remaining height with padding

I want my nav anchors' padding to be what's remaining in the nav. I've set it to have a max-height: 90px;. What I don't want to do is apply a fixed padding onto them like padding: 36px 0;. How can I possibly achieve that without adjusting it myself?

nav {
  display: flex;
  align-items: center;
  min-height: 90px;
  padding-left: 30px;
  padding-right: 30px;
}

nav a {
  margin: 0 15px;
  background-color: orange;
}
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Upvotes: 0

Views: 68

Answers (1)

symlink
symlink

Reputation: 12208

You have to give the <nav> an align-items value of stretch, and make the <a> tags flex boxes as well, with align-items: center: 

nav {
  display: flex;
  align-items: stretch;
  min-height: 90px;
  padding-left: 30px;
  padding-right: 30px;
}

nav a {
  padding: 0 15px;
  background-color: orange;
  flex-grow: 1;
  display: flex;
  align-items: center;
}
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Upvotes: 1

Related Questions