Riot.js 2.2 Bug Report Template

by gianlucaguarini

HTML

<script src="https://cdn.jsdelivr.net/g/[email protected](riot.min.js+compiler.min.js)"></script>
<div class="splitLayout">
  <div>
    Left panel
  </div>
  <div class="listPanel">
    
    <div class="scrollPanel" riot-tag="scroll-panel"></div>
    
    <!--
    Try this HTML instead of <scroll-panel> (identical HTML).
    It works, whereas the tag doesn't
    -->
    <!--
    <div class="scrollPanel">
      <div class="scrollableList">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
        <div>Item 6</div>
        <div>Item 7</div>
      </div>
    </div>
    -->
  </div>
</div>

<script type="riot/tag">
    <scroll-panel>
        <div class="scrollableList">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
            <div>Item 4</div>
            <div>Item 5</div>
            <div>Item 6</div>
            <div>Item 7</div>
        </div>
    </scroll-panel>
</script>

CSS

body {
    font-family: sans-serif;
}

.splitLayout{
  display:flex;
}

.listPanel {
  display: flex;
  flex-direction: column;
  height: 100px;
  flex-basis: 150px;
}

.scrollPanel{
  position:relative;
  overflow-y: auto;
  overflow-x: hidden;
  border: 2px solid green;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.scrollableList{
  position:absolute;
}

JavaScript

/**
 * Riot.js is loaded from External Resources
 * https://cdn.jsdelivr.net/g/[email protected](riot.min.js+compiler.min.js)
 */
riot.mount('*')