JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="container" id="container" onscroll="document.getElementById('listId').hidePopover()">
<h5>PROBLEM: Container with overflow-y: auto, partially hiding list content and creating multiple nested scroll containers.<br><br>SOLUTION? New Anchor API available in Webkit browsers?</h5>



<button id="anchorId" class="anchor" onclick="document.getElementById('listId').showPopover()">
Show
</button>



<div class="list-wrapper">
  <ul class="list" id="listId" popover>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
    <li>Option 6</li>
    <li>Option 7</li>
    <li>Option 8</li>
    <li>Option 9</li>
    <li>Option 10</li>
    <li>Option 11</li>
    <li>Option 12</li>
    <li>Option 13</li>
    <li>Option 14</li>
    <li>Option 15</li>
    <li>Option 16</li>
    <li>Option 17</li>
    <li>Option 18</li>
    <li>Option 19</li>
    <li>Option 20</li>
    <li>Option 21</li>
    <li>Option 22</li>
    <li>Option 23</li>
    <li>Option 24</li>
    <li>Option 25</li>
    <li>Option 26</li>
    <li>Option 27</li>
    <li>Option 28</li>
    <li>Option 29</li>
    <li>Option 30</li>
    <li>Option 31</li>
    <li>Option 32</li>
    <li>Option 33</li>
    <li>Option 34</li>
    <li>Option 35</li>
    <li>Option 36</li>
    <li>Option 37</li>
    <li>Option 38</li>
    <li>Option 39</li>
    <li>Option 40</li>
    <li>Option 41</li>
    <li>Option 42</li>
    <li>Option 43</li>
    <li>Option 44</li>
    <li>Option 45</li>
    <li>Option 46</li>
    <li>Option 47</li>
    <li>Option 48</li>
    <li>Option 49</li>
    <li>Option 50</li>
  </ul>
 </div>

<p class="text-right">Paragraph 1</p>
<p class="text-right">Paragraph 2</p>
<p class="text-right">Paragraph 3</p>
<p class="text-right">Paragraph 4</p>
<p class="text-right">Paragraph 5</p>
<p class="text-right">Paragraph 6</p>
<p class="text-right">Paragraph 7</p>
<p class="text-right">Paragraph 8</p>
<p class="text-right">Paragraph 9</p>
<p...

CSS

body {}

* {
  font-family: sans-serif;
}

.text-right {
  text-align: right;
}

.container {
  margin: 3rem;
  padding: 2rem 2rem 8rem 2rem;
  border: 2px solid green;
  overflow-y: auto;
  max-height: 14rem;
}

button {
  padding: .4rem;
}

.anchor {
  anchor-name: --my-anchor;
}

.list-wrapper {
  position: relative;
}

.list {
  border: 3px solid fuchsia;
  height: 25rem;
  margin: 0;
  overflow-y: scroll;
  background: white;
  position: absolute; /* WARNING: this rule doesn't take effect in Firefox and other unsupporting browser, due to the [popover] attribute taking precedence... That is, another solution must be devised to not break browsers not supporting anchor positioning. */
  top: 0;
  left: 0;
}

@supports (position-anchor: --my-anchor) {

  .list {
    position: static;
    position-anchor: --my-anchor;
    top: anchor(bottom);
    left: anchor(left);
  }
}

.list li {
  list-style-type: none;
}