Flexbox child ignores parent's padding

Question

My #main element ignores it's wrapper padding. I set position:absolute on children, but when I try to change it from position:static,to position:relative it just ignores parent's height. Any workarounds?

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrapper-body {
    height: 100%;
    display: flex;
    flex-direction: column;
}
#wrapper-header {
    width: 100%;
    flex: 0 1 50px;
    background: url("header.png");
    display: flex;
    align-items: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    z-index: 5;
}
#wrapper-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    padding: 25px;
}
#wrapper-footer {
    width: 100%;
    flex: 0 1 auto;
    background-color: #212121;
}
#menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    right: 0;
    position: absolute;
}
.menu-button {
    background-color: #3B3B3B;
    width: 100px;
    height: 22px;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #F7F7F7;
    border-radius: 2px;
    font-family: "codropsicons", verdana;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    transition: 0.5s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.3);
}
.active-button, .menu-button:hover {
    background-color: #E0962D;
}
#main {
    background-color: green;
    height: 100%;
    width: 100%;
    position: absolute;
}
#copyright {
    height: 20px;
    width: auto;
    display: flex;
    align-items: center;
    font-family: "codropsicons", verdana;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    color: #F7F7F7;
    margin-left: 15px;
    opacity: 0.1;
}

<div id="wrapper-body">
    <div id="wrapper-header">
        <nav id="menu">
            <a class="menu-button active-button">O nas</a>
            <a class="menu-button">Oferta</a>
            <a class="menu-button">Galeria</a>
            <a class="menu-button">Kontakt</a>
        </nav>
    </div>
    <div id="wrapper-main">
        <main id="main">
            Test
            <br> Test
            <br>
        </main>
    </div>
    <div id="wrapper-footer">
        <div id="copyright">Koyot © 2017 All rights reserved</div>
    </div>
</div>

https://jsfiddle.net/Ldmmxw9m/3/

Answer 1

Try adding this to the parent element: box-sizing:border-box;

This changes how the width and height is calculated by the browser so it includes padding and borders. With flex, using border-box on the parent has corrected spacing issues.

Answer 2

1. Remove position: absolute; from #main.

Absolutely positioned items are "out of the flow". Setting the parent to relative will modify the absolute child element's bounding box to it's own height and width, but padding is not taken into account.

2. Change the wrapper's align-items: center; to align-items: stretch;

It seems to me that you don't want the child to be vertically-aligned in the middle, but rather to take up the entire height of the wrapper. align-items: stretch will apply this behavior.

Updated Fiddle

/* TAGS */

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}


/* END OF TAGS */


/* WRAPPERS */

#wrapper-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#wrapper-header {
  width: 100%;
  flex: 0 1 50px;
  background: url("header.png");
  display: flex;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  z-index: 5;
}

#wrapper-main {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  padding: 25px;
}

#wrapper-footer {
  width: 100%;
  flex: 0 1 auto;
  background-color: #212121;
}


/* END OF WRAPPERS */


/* CONTENT */

#menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  right: 0;
  position: absolute;
}

.menu-button {
  background-color: #3B3B3B;
  width: 100px;
  height: 22px;
  margin-right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #F7F7F7;
  border-radius: 2px;
  font-family: "codropsicons", verdana;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  transition: 0.5s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.3);
}

.active-button,
.menu-button:hover {
  background-color: #E0962D;
}

#main {
  background-color: green;
  width: 100%;
}

#copyright {
  height: 20px;
  width: auto;
  display: flex;
  align-items: center;
  font-family: "codropsicons", verdana;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  color: #F7F7F7;
  margin-left: 15px;
  opacity: 0.1;
}

<body>

  <div id="wrapper-body">

    <div id="wrapper-header">
      <nav id="menu">
        <a class="menu-button active-button">O nas</a>
        <a class="menu-button">Oferta</a>
        <a class="menu-button">Galeria</a>
        <a class="menu-button">Kontakt</a>
      </nav>
    </div>

    <div id="wrapper-main">
      <main id="main">
        Test<br> Test
        <br>
      </main>
    </div>

    <div id="wrapper-footer">
      <div id="copyright">Koyot © 2017 All rights reserved</div>
    </div>

  </div>
</body>

Answer 3

It doesn't ignore the parents height when using position: relative, it simply keeps the padding of the parent, but apart from that it fills the parent - see my snippet. Of course the parent's height has to be set when you use a percentage value for the child's height...

#wrapper-main{
  flex:1 1 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    padding:25px;
    background-color:yellow;
    height: 200px;
}

#main{
    background-color:green;
    height:100%;
    width:100%;
    position:relative;
}

<div id="wrapper-main">
 <main id="main">
some content
 </main>
</div>

Answer 4

As Santi said, you can remove position: absolute on #main, since that will place the element relative to it's nearest positioned ancestor, ignoring the ancestor's padding.

Or if that's not an option, you could use top/left/right/bottom values that match the padding amount, and remove the padding on the parent if that's no longer needed.

/* TAGS */

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}


/* END OF TAGS */


/* WRAPPERS */

#wrapper-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#wrapper-header {
  width: 100%;
  flex: 0 1 50px;
  background: url("header.png");
  display: flex;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  z-index: 5;
}

#wrapper-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

#wrapper-footer {
  width: 100%;
  flex: 0 1 auto;
  background-color: #212121;
}


/* END OF WRAPPERS */


/* CONTENT */

#menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  right: 0;
  position: absolute;
}

.menu-button {
  background-color: #3B3B3B;
  width: 100px;
  height: 22px;
  margin-right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #F7F7F7;
  border-radius: 2px;
  font-family: "codropsicons", verdana;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  transition: 0.5s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.3);
}

.active-button,
.menu-button:hover {
  background-color: #E0962D;
}

#main {
  background-color: green;
  top: 25px;
  left: 25px;
  right: 25px;
  bottom: 25px;
  position: absolute;
}

#copyright {
  height: 20px;
  width: auto;
  display: flex;
  align-items: center;
  font-family: "codropsicons", verdana;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  color: #F7F7F7;
  margin-left: 15px;
  opacity: 0.1;
}

<body>

  <div id="wrapper-body">

    <div id="wrapper-header">
      <nav id="menu">
        <a class="menu-button active-button">O nas</a>
        <a class="menu-button">Oferta</a>
        <a class="menu-button">Galeria</a>
        <a class="menu-button">Kontakt</a>
      </nav>
    </div>

    <div id="wrapper-main">
      <main id="main">
        Test
        <br> Test
        <br>
      </main>
    </div>

    <div id="wrapper-footer">
      <div id="copyright">Koyot © 2017 All rights reserved</div>
    </div>

  </div>
</body>