Facing Issues with @container query or container-type
I am trying to create a message bubble where i was testing out what if the message is one-liner so i've noticed that one of the pseudo elment was overflowing out of the div which is because of its absolute postion which is mandatory too, to have the rounded corners, however I wanted to fix it using @container query where i can see that it is not getting the auto height because of which query that i added is also failing. here's the codepen thought
Thanks in advance friends!!
codepen: https://codepen.io/raj-shukla/pen/zYgXqrY?editors=1100
1 Reply
I’m not clear on the problem but from what I see You are setting a lot of fixed widths and heights. Using inset instead so that the pseudo element matches its relative parent , like using height auto.
Can you explain the goal/what you want from the different elements that you’re not getting?
And try taking off the width and heights from the pseudo elements , give them a bright background or outline so you can see them clearly and experiment with using inset:0, inset-inline: 0 or inset-block:0. Inset:0 is the same as setting top, right, bottom, left to 0. Inset-inline:0 is the same as setting left and right to 0; inset-block:0 is the same as setting top and bottom to 0. Once you understand that behaviour , try inset:1rem them inset:-1rem; etc. make sure to take off any sizing properties from these pseudo elements first though and that position: absolute is set