宽度百分比值未应用于元素

Question

I am styling an element in HTML using Sass, and when setting the width of an element using percentages, it is not applied.

Could this be due to me setting the parent element's width and height using "content-max"?

Here is a basic version of the code I am using, the idea is for the parent's size to be limited by the image size (which works), and for the text overlay to be half the width and the full height of the container element (hence me using 50 and 100 percent respectively).

<div class="container">
      <img src="image.png" alt="A square image">
      <div class="text-overlay">
                
      </div>
</div>

The separately complied Sass is as follows:

.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 HTML and SCSS are written in different files and correctly complied where necesary.

Answer 1

As mentioned in the comments, you can not write Sass directly inside your HTML markup. It has to be compiled first.

In your example you are using nesting, which is not valid CSS3 code, so to fix this behavior you either have to write plain CSS like the snippet below or compile your Sass before you apply it to your HTML.

---

About your actual question, the positioning you are trying to archieve is working, when you hardcore the width and height to the .container element.

---

 .container { position: relative; width: 200px; height: 200px; }.container img { position: absolute; z-index: 0; }.container.text-overlay { position: absolute; z-index: 1; width: 50%; height: 100%; background-color: green; color: red; opacity: 50%; }

 <div class="container"> <img src="https://i.picsum.photos/id/793/200/200.jpg?hmac=3DeE830wjdSShKq_h_iFtV_jAxf43FO4xx-sivW0Q_Y"> <div class="text-overlay"> Overlay </div> </div>