absolute rotated div need to take space and not overflow from his parent (so childs decide the dimension of parent container)

Question

image of the problem

the white background isn't showing when using absolute child

the problem

the problem is that the white background of the parent isn't visible.

so maybe the .canvas width is set to 0.

yeah, I can add a hard-coded width, but I want that it to auto-size based on the content.

the line is not placed relative so isn't in the document flow and this make it not be used as width.

how can I solve this issue?

the html code

.canvas {
  position: relative;
  background: white;
  /* where is it?? */
}

.canvas .line {
  position: absolute;
  background: blue;
  height: 0.25rem;
}

.canvas .line:hover {
  background: red;
}

what does the code before do?

I have some divs with a parent div relative and some childs absolute

the child won't have any content/text inside

(the style of the div is parsed from javascript but isn't important to the code js, I will add you the result HTML).

the styles are width, translateX, translateY, rotate().

what do I need?

the final result needs to be like this:

what I tried.

manually way (but I don't like to do like this)

if I set a width then it works

Is it possible to automatically set the width from the first point to the last?

without `absolute` in lines (not working)

a possible solution, that is not adding position:absolute; to the lines

but is very important for this case

there is a gap between every line.

this is happening because in CSS now also the height will be considered

if you look closely, the gap is equal to the height of the previous line

now the white background is shown, but since the elements are rotated, this means that it will take up more space than it should be

let's say we have a div of the length of 1.4rem,
but when rotated the space occupied can be less or more

let's say we have a 1.4rem width and 45deg
is equal to 1rem of width and also height

as you see in the photo before, there is a square and we find the diagonal of it with the pitagora formula

but not in all cases it will be a square, but can be a rectangle

so if is 25deg

the width it will be less than the width,

but the height is will be like the double of the width of the line

is very difficult and I am wondering how I can browser automatically do this calculation for me.

this is the bug without absolute

so if you can I want to use absolute for accurate results, but without that bugs mentioned before.