When I try to style an element in HTML using Sass, setting the width using percentages doesn't seem to work.
I wonder if this issue is related to me using "content-max" to set the parent element's width and height?
Here is a simplified version of the code I'm working with. The goal is to limit the parent's size by the image size (which is functioning correctly), and have the text overlay occupy half the width and full height of the container element (hence the use of 50 and 100 percent).
<div class="container">
<img src="image.png" alt="A square image">
<div class="text-overlay">
</div>
</div>
The separate compiled Sass looks like this:
.container {
display: block;
position: relative;
width: max-content;
height: max-content;
img {
display: block;
position: absolute;
z-index: 0;
}
.text-overlay {
display: flex;
position: absolute;
width: 50%;
height: 100%;
z-index: 1;
}
}
Both the HTML and SCSS codes are written in separate files and correctly compiled when needed.