0

How can I change the width in a child to put it inside the parent div?

It should be internal to padding. In this case, top and left are fine but right is not proper.

https://jsbin.com/tuhohuvoxa/edit?html,css,output

.parent {
  padding: 20px;
  border: 0.1em solid;
  height: 200px;
}

.child {
  position: absolute;
  border: 0.1em solid;
  height: 10px;
  width: 100%;
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
akhildevelops
  • 159
  • 1
  • 8
  • Is there a reason the child has to be `postion:absolute`? If you remove that from the .child class then it's width will automatically match the parent. – Daniel Black May 16 '23 at 17:48
  • If you apply `position: absolute` on an element without a parent it's being positioned relative to, it will go out of the document flow. If you apply `position: relative` to its parent, it will be positioned absolute in the parent elements content box. – Sigurd Mazanti May 16 '23 at 19:00
  • I think I;m not understanding working of absolute position. I've created one more question, if you guys can answer that will be helpful, https://stackoverflow.com/questions/76273409/why-absolute-position-respects-parents-padding-if-its-static – akhildevelops May 17 '23 at 14:58

3 Answers3

1

If you do not need the child to be absolute, simply removing the position:absolute from the .child class will make the width match the parent without overflow.

If you really need the .child class to be absolute you can update the .child and .parent classes as follows:

.parent {
  padding: 20px;
  border: 0.1em solid;
  height: 200px;
  position: relative;
}

.child {
    position: absolute;
    border: 0.1em solid;
    height: 10px;
    left: 0;
    right: 0;
    margin-left: 20px;
    margin-right: 20px;
}

Setting position:relative on the parent will ensure the child is relative to the parent. Setting left and right to 0 will ensure the child matches the parent width, and adding the margin-left and margin-right will ensure the child is inset from the parent.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Daniel Black
  • 550
  • 6
  • 13
  • Yaa, I want the child to be absolute. Values for margin-left and margin-right has been provided based on the padding in the parent element. What if I don't know the padding value of parent ? How can I solve then ? – akhildevelops May 17 '23 at 04:54
1

*{
        margin: 0;
        padding: 0;
    }
    .parent {
        border: 0.1em solid;
        height: 100px;
        width: 100px;
        position: relative;
    }

    .child {
        position: absolute;
        border: 0.1em solid;
        height: 20px;
        width: 20px;
        top: 0px;
        left: 0px;
    }
<div class='parent'></div>
<div class='child'></div>
Yameen
  • 104
  • 1
  • 6
0

You just need to add this position to your parent and child element:

.parent {
  position: relative;
}

.child {
  left: 0;
}

Then the child with position absolute will adapt to the parent.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Gui
  • 86
  • 3