I would like to make semi transparent div .b 100% heigh of parent, even when you scorll.

Note - I dont know what wrap div will have max-height:200px; I added this just to replicate the issue. wrap div hss auto height.

.wrap {
  white-space: pre-wrap;
  position: relative;
  height: 100%;
  max-height:200px;
  background: #fff;
  overflow-y: auto;
  background: red;
}

.b {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

<div class="wrap">

  <div class="a">
    Origin:
    The phrase "Lorem ipsum dolor sit amet" is derived from a jumbled Latin version of a passage from Cicero's "De Finibus Bonorum et Malorum" (On the Extremes of Good and Evil), a treatise on the theory of ethics.
    Purpose:
    It's used as a placeholder to fill space and demonstrate the visual elements of a design, such as font, spacing, and layout, without the reader being distracted by actual content.
    Common Use:
    It's widely used in graphic design, web development, and publishing to show how text will look in a design before the actual text is written.
    Why it's used:
    The letters and letter spacing in the combinations reveal, at their best, the weight, design, and other important features of the typeface.
    Example:
    A common form of Lorem ipsum reads: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  </div>


  <div class="b"></div>

</div>

I would like to make semi transparent div .b 100% heigh of parent, even when you scorll.

Note - I dont know what wrap div will have max-height:200px; I added this just to replicate the issue. wrap div hss auto height.

.wrap {
  white-space: pre-wrap;
  position: relative;
  height: 100%;
  max-height:200px;
  background: #fff;
  overflow-y: auto;
  background: red;
}

.b {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

<div class="wrap">

  <div class="a">
    Origin:
    The phrase "Lorem ipsum dolor sit amet" is derived from a jumbled Latin version of a passage from Cicero's "De Finibus Bonorum et Malorum" (On the Extremes of Good and Evil), a treatise on the theory of ethics.
    Purpose:
    It's used as a placeholder to fill space and demonstrate the visual elements of a design, such as font, spacing, and layout, without the reader being distracted by actual content.
    Common Use:
    It's widely used in graphic design, web development, and publishing to show how text will look in a design before the actual text is written.
    Why it's used:
    The letters and letter spacing in the combinations reveal, at their best, the weight, design, and other important features of the typeface.
    Example:
    A common form of Lorem ipsum reads: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  </div>


  <div class="b"></div>

</div>

• html
• css

2 Answers 2

Well it didn't work without adding another wrapper, which will be the frame for everything with height: 200px (or 100vh) and overflow-y.

.wrap {
  white-space: pre-wrap;
  position: relative;
  height: 100%;
  color: #fff;
  background: red;
}

.wrap-wrapper {
  max-height: 180px;
  overflow-y: auto;
}

.b {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

<div class="wrap-wrapper">
  <div class="wrap">

    <div class="a">
      Origin:
      The phrase "Lorem ipsum dolor sit amet" is derived from a jumbled Latin version of a passage from Cicero's "De Finibus Bonorum et Malorum" (On the Extremes of Good and Evil), a treatise on the theory of ethics.
      Purpose:
      It's used as a placeholder to fill space and demonstrate the visual elements of a design, such as font, spacing, and layout, without the reader being distracted by actual content.
      Common Use:
      It's widely used in graphic design, web development, and publishing to show how text will look in a design before the actual text is written.
      Why it's used:
      The letters and letter spacing in the combinations reveal, at their best, the weight, design, and other important features of the typeface.
      Example:
      A common form of Lorem ipsum reads: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    </div>


    <div class="b"></div>

  </div>
</div>

Pro tip: you can use a pseudo element instead of the .b div. In addition, this makes the .a element unnecessary. So you can achieve this with two divs and one pseudo div.

.wrap {
  white-space: pre-wrap;
  position: relative;
  height: 100%;
  color: #fff;
  background: red;
}

.wrap-wrapper {
  max-height: 180px;
  overflow-y: auto;
}

.wrap:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);

  /* add this if you want to select text*/
  pointer-events: none;
}

<div class="wrap-wrapper">
  <div class="wrap">

      Origin:
      The phrase "Lorem ipsum dolor sit amet" is derived from a jumbled Latin version of a passage from Cicero's "De Finibus Bonorum et Malorum" (On the Extremes of Good and Evil), a treatise on the theory of ethics.
      Purpose:
      It's used as a placeholder to fill space and demonstrate the visual elements of a design, such as font, spacing, and layout, without the reader being distracted by actual content.
      Common Use:
      It's widely used in graphic design, web development, and publishing to show how text will look in a design before the actual text is written.
      Why it's used:
      The letters and letter spacing in the combinations reveal, at their best, the weight, design, and other important features of the typeface.
      Example:
      A common form of Lorem ipsum reads: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."


  </div>
</div>

Since your content is scroll-able and you are hiding the overflow, you can use a big overlay.

Here is an idea with border-image

.wrap {
  white-space: pre-wrap;
  position: relative;
  max-height:200px;
  background: #fff;
  overflow-y: auto;
  background: red;
}

.b {
  position: absolute;
  inset: 0;
  border-image: conic-gradient(rgb(0 0 0/50%) 0 0) fill 0//999px;
}

<div class="wrap">

  <div class="a">
    Origin:
    The phrase "Lorem ipsum dolor sit amet" is derived from a jumbled Latin version of a passage from Cicero's "De Finibus Bonorum et Malorum" (On the Extremes of Good and Evil), a treatise on the theory of ethics.
    Purpose:
    It's used as a placeholder to fill space and demonstrate the visual elements of a design, such as font, spacing, and layout, without the reader being distracted by actual content.
    Common Use:
    It's widely used in graphic design, web development, and publishing to show how text will look in a design before the actual text is written.
    Why it's used:
    The letters and letter spacing in the combinations reveal, at their best, the weight, design, and other important features of the typeface.
    Example:
    A common form of Lorem ipsum reads: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  </div>


  <div class="b"></div>

</div>