Why does my position: absolute child overflow my parent's border?

Question

I have a parent container, with some child components inside. The last child has to be placed at the bottom of the container. I tried using justify-content: space-between, but it doesn't work for me because I need that the space between the last element and the other elements is greater and noticeable. I ended up trying position:absolute, bottom: 0, but the width of the child is greater than the parent.

Perhaps there's a better way to do it by mixing with flex, just haven't been able to do it.

.Parent {
  background: #F8F8F8;
  height: 400px;
  padding: 20px;
  width: 395px;
  position: relative;
  max-width: 395px;
  border: solid 1px red;
}

.First--Child {
  border: solid 1px blue;
  height: 40px;
  margin: 10px 0;
}

.Second--Child {
  border: solid 1px green;
  height: 40px;
  margin: 10px 0;
}

.Third--Child {
  border: solid 1px violet;
  height: 40px;
  margin: 10px 0;
}

.Last--Child {
  border: solid 1px cyan;
  height: 60px;
  position: absolute;
  bottom: 0;
  width: 100%;
  margin: 0 0 10px 0;
  display: flex;
  justify-content: space-between;
}

.Left--Button,
.Right--Button {
  border: solid 1px gray;
  width: calc(100% - 300px);
}

<div class='Parent'>
  <div class='First--Child'>
  </div>
  <div class='Second--Child'>
  </div>
  <div class='Third--Child'>
  </div>
  <div class='Last--Child'>
    <button class='Left--Button'>Left</button>
    <button class='Right--Button'>Right</button>
  </div>
</div>

score 2 · Accepted Answer · answered Nov 10 '17 at 20:50

The width of the last child isn't wider than the parent - its the same width. It is the margin that has caused it to be out of alignment.

If the bottom placement is correct for your needs, you could get the horizontal alignment sorted either by removing the padding on the parent, setting the child to:

left: -20px

or

margin-left: -20px

, or adding

box-sizing:border-box

to the parent

score 0 · Answer 2 · answered Nov 10 '17 at 20:48

If you must use this layout technique, you could calculate the last--child's width minus the padding of the parent.

.Parent {
  background: #F8F8F8;
  height: 400px;
  padding: 20px;
  width: 395px;
  position: relative;
  max-width: 395px;
  border: solid 1px red;
}

.First--Child {
  border: solid 1px blue;
  height: 40px;
  margin: 10px 0;
}

.Second--Child {
  border: solid 1px green;
  height: 40px;
  margin: 10px 0;
}

.Third--Child {
  border: solid 1px violet;
  height: 40px;
  margin: 10px 0;
}

.Last--Child {
  border: solid 1px cyan;
  height: 60px;
  position: absolute;
  bottom: 0;
  width: calc(100% - 40px);
  margin: 0 0 10px 0;
  display: flex;
  justify-content: space-between;
}

.Left--Button,
.Right--Button {
  border: solid 1px gray;
  width: calc(100% - 300px);
}

<div class='Parent'>
  <div class='First--Child'>
  </div>
  <div class='Second--Child'>
  </div>
  <div class='Third--Child'>
  </div>
  <div class='Last--Child'>
    <button class='Left--Button'>Left</button>
    <button class='Right--Button'>Right</button>
  </div>
</div>

Nice ! Why does the child's width exceeds the parent's width ? — Andres Zapata, Nov 10 '17 at 20:50
It breaks out it because it is the same width as the paren without respect to the padding, but the layout respects the padding. — k.cornett, Nov 10 '17 at 20:57

score 0 · Answer 3 · answered Nov 10 '17 at 20:53

Try this for your CSS. I split the buttons into two classes and just floated them while adding a height percentage for the fill. This is assuming you are okay with absolute positioning.

    .Parent {
        background: #F8F8F8;
        height: 400px;
        padding: 20px;
        width: 395px;
        position: relative;
        max-width: 395px;
        border: solid 1px red;
    }

    .First--Child {
        border: solid 1px blue;
        height: 40px;
        margin: 10px 0;
    }

    .Second--Child {
        border: solid 1px green;
        height: 40px;
        margin: 10px 0;
    }

    .Third--Child {
        border: solid 1px violet;
        height: 40px;
        margin: 10px 0;
    }

    .Last--Child {
        border: solid 1px cyan;
        height: 60px;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        display: block;
        justify-content: space-between;
    }

    .Left--Button {
        height:100%;
        float:left;
        border: solid 1px gray;
        width: calc(100% - 300px);
    }
    .Right--Button {
        height: 100%;
        float: right;
        border: solid 1px gray;
        width: calc(100% - 300px);
    }

Michael Benjamin · Answer 4 · 2017-11-11T04:44:07.030

The last child has to be placed at the bottom of the container. I tried using justify-content: space-between, but it doesn't work for me because I need that the space between the last element and the other elements is greater and noticeable.

With justify-content: space-between (in a vertical container) or align-content: space-between (in a horizontal container) you can pin the last item to the bottom, and not impact the siblings' position, only if there are two items (one stays on top, the other stays at the bottom).

But if there are more than two items, then this method will not work because space-between distributes space evenly between items, causing the items between the first and last to spread out.

Since you have more than two items in your container, you need another method.

Absolute positioning indeed works. It pins the last item to the bottom. However, it also removes the item from the normal flow, meaning that it doesn't take up space and siblings can overlap it.

Flexbox, however, provides a clean and efficient alternative: auto margins. By setting the last item to margin-top: auto, it shifts to the bottom of the container, while its siblings remain at the top.

Here's a complete explanation, which includes a comparison of space-between and auto margins:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

.Parent {
  display: flex;              /* new */
  flex-direction: column;     /* new */
  height: 400px;
  padding: 20px;
  max-width: 395px;
  border: solid 1px red;
  background: #F8F8F8;
}

.First--Child {
  border: solid 1px blue;
  height: 40px;
  margin: 10px 0;
}

.Second--Child {
  border: solid 1px green;
  height: 40px;
  margin: 10px 0;
}

.Third--Child {
  border: solid 1px violet;
  height: 40px;
  margin: 10px 0;
}

.Last--Child {
  border: solid 1px cyan;
  height: 60px;
  margin: auto 0 10px 0;        /* adjustment to margin-top */
  display: flex;
  justify-content: space-between;
}

.Left--Button,
.Right--Button {
  border: solid 1px gray;
  width: calc(100% - 300px);
}

<div class='Parent'>
  <div class='First--Child'></div>
  <div class='Second--Child'></div>
  <div class='Third--Child'></div>
  <div class='Last--Child'>
    <button class='Left--Button'>Left</button>
    <button class='Right--Button'>Right</button>
  </div>
</div>

Why does my position: absolute child overflow my parent's border?

4 Answers4