How can I prevent a fixed header from covering the vertical scrollbar of a container?-CodePudding

I have a disclosure container that appears upon button press on my carousel. There's a FA X icon that's used to close it. The container scales with the carousel so there's absolute sizing involved nor can there be and that's where I'm running into trouble.

What I'm trying to achieve is to have the disclosure text scroll vertically but have a bar across the top of the disclosure container to mask it as it scrolls but I still want the scroll bar to take up the entire height of the container as it currently does. Scroll bars come in different widths based on the browser and device so I need some way of running the fixed black bar to the edge of the scrollbar regardless of the size of that bar.

Here's what I'm trying to achieve:

But with the code below, I can't seem to find a way to have the bar span the entire length of the container without overlapping the scroll bar or becoming too short to cover the text as it scrolls. I've tried all manner of moving the overflow attribute around, using padding and margins on the different containers, and wrapping the entire disclosure in another container strictly to prevent overflow, but so far nothing has panned out. Is this possible with straight CSS and HTML? (no scrollbar plugins).

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: grey;
}

.disclosureContainer {
  display: flex;
  flex-direction: column;
  width: 96%;
  height: fit-content;
  background-color: black;
  border: 1px solid white;
  margin: 3.5rem auto;
  max-height: 14vw;
  min-height: 4rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.disclosureContainerHeader {
  display: flex;
  position: fixed;
  height: 1.7rem;
  width: 100%;
  background: black;
}

.disclosureText {
  display: block;
  font-family: BMWTypeNext Latin TT, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: white;
  line-height: clamp(0.7rem, -0.6rem   3vw, 0.9rem);
  font-size: clamp(0.5rem, -0.875rem   3vw, 0.7rem);
  padding: 1.8rem 0.5rem 0.5rem 0.5rem;
  text-align: justify;
  user-select: none;
  background-color: transparent;
}

.fa-times {
  display: block;
  color: white;
  font-size: 0.7rem;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.5rem 0.5rem;
  transition: all 0.2s linear;
  cursor: pointer;
  background-color: transparent;
  user-select: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div >
  <div >
    <i ></i>
  </div>
  <p >
    Through June 30, 2022, lease offer available on new 2022 BMW 228i xDrive Gran Coupe models from participating BMW Centers through BMW Financial Services NA, LLC, to customers who meet BMW Financial Services' credit requirements. Offer not valid in Puerto
    Rico. Monthly lease payments of $459 per month for 36 months is based on an adjusted capitalized cost of $36,155 (MSRP of $40,895, including destination and handling fee of $995, less $3,915 capitalized cost reduction, $0 security deposit, and suggested
    dealer contribution of $825). Actual MSRP and dealer contribution may vary and could affect your monthly lease payment. Cash due at signing includes $3,915 capitalized cost reduction, $459 first month's payment, $925 acquisition fee and $0 security
    deposit. Lessee responsible for insurance during the lease term, excess wear and tear as defined in the lease contract, $0.25/mile over 30,000 miles, plus disposition fee of up to $495 (not to exceed an amount permissible by law) at lease end. Not
    all customers will qualify for security deposit waiver. Tax, title, license, registration and dealer fees are additional fees due at signing. Advertised payment does not include applicable taxes. Purchase option at lease end, excluding tax, title
    and government fees, is $23,719. Offer valid through June 30, 2022 and may be combined with other offers unless otherwise stated. Models pictured may be shown with metallic paint and/or additional accessories. Visit your authorized BMW Center for
    important details.
  </p>
</div>

CodePudding user response：

See the edit to your snippet below. The reason why it overflowed was because of the fixed positioning. Fixing an element takes it completely out of the dom flow which is why it is overlapping the scroll bar. I fixed this by making the header position sticky with top: 0. I also removed absolute from the X icon. This should give you a fixed header within your disclosure box.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: grey;
}

.disclosureContainer {
  display: flex;
  flex-direction: column;
  width: 96%;
  height: fit-content;
  background-color: black;
  border: 1px solid white;
  margin: 3.5rem auto;
  max-height: 14vw;
  min-height: 4rem;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.disclosureContainerHeader {
  display: flex;
  position: sticky;
  top:0;
  left: 0;
  height: 1.7rem;
  width: 100%;
  background: black;
}

.disclosureText {
  display: block;
  font-family: BMWTypeNext Latin TT, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: white;
  line-height: clamp(0.7rem, -0.6rem   3vw, 0.9rem);
  font-size: clamp(0.5rem, -0.875rem   3vw, 0.7rem);
  padding: 1rem 0.5rem 0.5rem 0.5rem;
  text-align: justify;
  user-select: none;
  background-color: transparent;
}

.fa-times {
  display: block;
  color: white;
  font-size: 0.7rem;
  left: 0;
  top: 0;
  padding: 0.5rem 0.5rem;
  transition: all 0.2s linear;
  cursor: pointer;
  background-color: transparent;
  user-select: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div >
  <div >
    <i ></i>
  </div>
  <p >
    Through June 30, 2022, lease offer available on new 2022 BMW 228i xDrive Gran Coupe models from participating BMW Centers through BMW Financial Services NA, LLC, to customers who meet BMW Financial Services' credit requirements. Offer not valid in Puerto
    Rico. Monthly lease payments of $459 per month for 36 months is based on an adjusted capitalized cost of $36,155 (MSRP of $40,895, including destination and handling fee of $995, less $3,915 capitalized cost reduction, $0 security deposit, and suggested
    dealer contribution of $825). Actual MSRP and dealer contribution may vary and could affect your monthly lease payment. Cash due at signing includes $3,915 capitalized cost reduction, $459 first month's payment, $925 acquisition fee and $0 security
    deposit. Lessee responsible for insurance during the lease term, excess wear and tear as defined in the lease contract, $0.25/mile over 30,000 miles, plus disposition fee of up to $495 (not to exceed an amount permissible by law) at lease end. Not
    all customers will qualify for security deposit waiver. Tax, title, license, registration and dealer fees are additional fees due at signing. Advertised payment does not include applicable taxes. Purchase option at lease end, excluding tax, title
    and government fees, is $23,719. Offer valid through June 30, 2022 and may be combined with other offers unless otherwise stated. Models pictured may be shown with metallic paint and/or additional accessories. Visit your authorized BMW Center for
    important details.
  </p>
</div>

CodePudding user response：

Seems like the width: 100%; is making the header that way. Try changing it to width: fit-content; on line 31 of your CSS document.

.disclosureContainerHeader {
    display: flex;
    position: fixed;
    height: 1.7rem;
    width: fit-content;
    background: black;
}