How to get the header to auto adjust its height to its content?-CodePudding

Using flexbox, I styled the links with padding and bottom border line but the border line shows out past the header line, how to get the links and their bottom border line to completely be within the header?

Isn't the container supposed to auto adjust to fit its content?

* {
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1rem;
  margin: 0px;
  padding: 0px;
}

body {
  display: flex;
  flex-flow: column;
  height: 100vh;
  background-color: whitesmoke;
}

body>header,
body>footer {
  flex: 0 0 auto;
  background-color: white;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  /* padding: 0.25rem; */
}

body>header .link {
  color: blue;
  border-bottom: 2px solid transparent;
  outline: 0;
  padding: 0.25rem;
  text-decoration: none;
}

body>header .link:hover,
body>header .link:focus {
  border-bottom: 2px solid blue;
}

body>header .link.title {
  font-size: larger;
  font-variant: small-caps;
}

body>main {
  flex: 1 1 auto;
  overflow: auto;
}

<body>
  <header>
    <a href="#" >One</a>
    <a href="#" >Two</a>
    <a href="#" >Three</a>
    <a href="#" >Four</a>
    <a href="#" >Five</a>
  </header>
  <main></main>
  <footer>Footer</footer>
</body>

CodePudding user response：

As you have have defined padding for body > header .link , the border goes off.

You can add padding or define height to <header>, problem will be fixed.

For example: (Adding padding:0.5rem to <header> tag)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 1rem;
        margin: 0px;
        padding: 0px;
      }

      body {
        display: flex;
        flex-flow: column;
        height: 100vh;
        background-color: whitesmoke;
      }
      
      body > header {
        padding:0.5rem
      }

      body > header,
      body > footer {
        flex: 0 0 auto;
        background-color: white;
        border-top: 1px solid lightgray;
        border-bottom: 1px solid lightgray;
        /* padding: 0.25rem; */
      }

      body > header .link {
        color: blue;
        border-bottom: 2px solid transparent;
        outline: 0;
        padding: 0.25rem;
        text-decoration: none;
      }

      body > header .link:hover,
      body > header .link:focus {
        border-bottom: 2px solid blue;
      }

      body > header .link.title {
        font-size: larger;
        font-variant: small-caps;
      }

      body > main {
        flex: 1 1 auto;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <header>
      <a href="#" >One</a>
      <a href="#" >Two</a>
      <a href="#" >Three</a>
      <a href="#" >Four</a>
      <a href="#" >Five</a>
    </header>
    <main></main>
    <footer>Footer</footer>
  </body>
</html>

CodePudding user response：

try adding a padding bottom to the header. I just tried this in the sandbox and it seems to be working for me.

header{
  padding-bottom: 10px;
}

CodePudding user response：

If you want to fit your parent element to it's child , so Just try display:auto

CodePudding user response：

You should try putting padding-left: 0.25rem instead of padding: 0.25rem under the selector body>header .link. Like below:

* {
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1rem;
  margin: 0px;
  padding: 0px;
}

body {
  display: flex;
  flex-flow: column;
  height: 100vh;
  background-color: whitesmoke;
}

body>header,
body>footer {
  flex: 0 0 auto;
  background-color: white;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
}

body>header .link {
  color: blue;
  border-bottom: 2px solid transparent;
  outline: 0;
  padding: 0.25rem 0.25rem 0 0.25rem;
  text-decoration: none;
  border
}

body>header .link:hover,
body>header .link:focus {
  border-bottom: 2px solid blue;
}

body>header .link.title {
  font-size: larger;
  font-variant: small-caps;
}

body>main {
  flex: 1 1 auto;
  overflow: auto;
}

header {
  min-height: 30px;
}

<body>
  <header>
    <a href="#" >One</a>
    <a href="#" >Two</a>
    <a href="#" >Three</a>
    <a href="#" >Four</a>
    <a href="#" >Five</a>
  </header>
  <main></main>
  <footer>Footer</footer>
</body>

Hope it resolves your problem.