I am currently having trouble containing a color wheel element within the boundaries of its parent div (speech_bubble_middle_bar).
I understand that the correct approach is to use absolute positioning within a relative positioned div, so I attempted to create a parent container. However, I am facing difficulties in keeping any relative positioned div centered on the screen, and when the div is absolutely positioned, it does not stay within the constraints of the relatively positioned parent div.
Here is my current code snippet. Can anyone assist me in positioning this div so that it remains within the grey colored div? I have other elements within speech-bubble-middle-bar in my actual code, so I need to avoid making changes that would impact other elements. However, I can create a container div for the color_wheel if necessary.
For reference, here is a link to a working code-pen with the complete code: https://codepen.io/TheNomadicAspie/pen/dyWVLyx
<div id="speech_bubble_middle_bar" class="speech-bubble-middle-bar">
<div id="color_wheel" class="color-wheel"></div>
</div>
.speech-bubble-middle-bar {
grid-row: 2/3;
padding-left: 1%;
padding-right: 1%;
padding-top: 1%;
padding-bottom: 1%;
height: 100%;
background-color: grey;
}
.color-wheel {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
Below is how it currently appears.