JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="container" id="container">
<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  onclick="document.getElementById('listId').togglePopover()">
Toggle
</button>
<button id="anchorId" class="anchor" onclick="document.getElementById('listId').togglePopover()">
Toggle
</button>



  <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>

<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 {
  display: grid;
  margin: 3rem;
  padding: 2rem 2rem 14rem 2rem;
  border: 2px solid green;
  overflow-y: auto;
  max-height: 15vh;
}

.anchor {
  anchor-name: --my-anchor;
  padding: 1rem;
  display: inline;
}

.list {
  position: absolute;
  border: 3px solid fuchsia;
  height: 25rem; 
  margin: 0;
  overflow-y: scroll;
  background: white;
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(left);
}

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

.mb {
  margin-bottom: 1rem
}