css: is it possible to move the child elements inside the parent element so that the parent element is automatically resized

Question

Do you know if it is possible not to "manually" set the exact size of the parent block by moving the child blocks inside the parent block (using position: relative; left: xxx; or transform: translate() )?

I gave an example - you can see that the moved block goes beyond the bottom border of the parent block and does not reach the right border of the parent block

but I would like the elements to fit exactly into the parent block

i can do it by manually setting coordinates and size, but can it be done only with css automatically?

 * { box-sizing: border-box; }.group { display: inline-block; margin: 0; padding: 0; font-size: 0; border: 1px solid black; }.group div { font-size: 20px; display: inline-block; }.group div:not(.main) { width: 128px; height: 128px; border: 1px solid red; background: lime; }.main { transform: translate(-20px, 20px); width: 192px; height: 192px; border: 1px solid blue; background: orange;

 <div class = 'group'> <div>1</div> <div>2</div> <div class = 'main'>3</div> </div>

Answer 1

You can achieve this by setting the child divs to float and then moving the last one with margins.

 .group { display: inline-block; margin: 0; padding: 0; font-size: 0; border: 1px solid black; }.group div { font-size: 20px; display: inline-block; }.group div:not(.main) { width: 128px; height: 128px; float: left; border: 1px solid red; background: lime; }.main { margin-top: 20px; margin-left: -20px; width: 192px; height: 192px; float: left; border: 1px solid blue; background: orange; }

 <div class = 'group'> <div>1</div> <div>2</div> <div class = 'main'>3</div> </div>

Note that this is only a solution for your exact question, meaning it will fit the right and the bottom only.

Answer 2

You just need to compensate for the translate of the child in the margins of the parent, thus canceling any gaps.

Note: I took the liberty of cleaning the code, eliminating unnecessary values and also making the solution more clear. Hope it work for you.

Edit: This solution do not require float which could be a problem. Also, you can use position: relative instead of transform without any problems.

 div { display: table; outline: 1px solid black; /* same amount as the transform to compensate */ margin-right: -20px; margin-bottom: 20px; } div > div { display: inline-block; width: 128px; height: 128px; background: lightgreen; } div > div:last-child { width: 192px; height: 192px; /* use this and delete the transform if you like: position: relative; right: 20px; top: 20px; */ transform: translate(-20px, 20px); background: orange; }

 <div> <div>1</div> <div>2</div> <div>3</div> </div>