children of element with column-width move around when clicked with a <body> of a certain size-CodePudding

I cannot manage to reproduce the problem in fiddle.

The problem occurs when is exactly 1286px wide (in the inspector), but it might also happen at other widths.

Clicking the elements changes the height of the body, from 86 to 85.9833.

https://i.imgur.com/rGJPFyW.png

https://gfycat.com/acidicmarvelousabyssiniancat

 <html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
    body {font-family: monospace; background: #222; color:#aaa;}
    html{scrollbar-color: grey black;}

    #ui_tags{
        column-width: 80px;
        margin: 1em;
        padding: 1em;
        background-color: #181818;
        /*width: 90%;*/
    }
    .tag_select {
        cursor:pointer;
        color:#aaa;
    }
    .tag_select:hover {
        background: #222;
    }
    .tag_select:active {
        background: #f00;
    }
    p {margin-bottom:1px;margin-top:1px;}


    </style>

    <body>
    <div id="ui">
    <div id="ui_tags"><p class="tag_select">4ch:114</p><p class="tag_select">avtr:54</p><p class="tag_select">awe:53</p><p class="tag_select">btfl:211</p><p class="tag_select">cat:319</p><p class="tag_select">charc:19</p><p class="tag_select">cmc:145</p><p class="tag_select">dung:15</p><p class="tag_select">frnc:53</p><p class="tag_select">fun:5</p><p class="tag_select">inspr:192</p><p class="tag_select">lego:16</p><p class="tag_select">lndsc:63</p><p class="tag_select">mchn:5</p><p class="tag_select">meh:42</p><p class="tag_select">mnstr:87</p><p class="tag_select">pgrmh:62</p><p class="tag_select">pltc:239</p><p class="tag_select">ppl:22</p><p class="tag_select">pxlr:72</p><p class="tag_select">shrlt:79</p><p class="tag_select">txl:145</p><p class="tag_select">urbn:6</p><p class="tag_select">vlgr:135</p><p class="tag_select">wrd:23</p>
    </div>
    </div>

    <div id="gallery">
    </div>

    <script type="text/javascript">

    window.onload = function(){
        var tag_selects = document.getElementsByClassName("tag_select");
        for(var i = 0, size = tag_selects.length; i < size ; i  ){
            // var elem = tag_selects[i].children[1];
            var elem = tag_selects[i];
            elem.addEventListener("click", function(event){
                char = this.innerHTML;
                document.getElementById('gallery').innerHTML = char;
            });
        }
    }

    </script>
    </body>
    </html>

I don't know if I'm using bad practices, or how to avoid this problem. I think column-width is not really stable and should be avoided but I'm not sure.

CodePudding user response：

I modified the <p> to <span> and the problem went away.

CodePudding user response：

If I were you I'd avoid using this html{scrollbar-color: grey black;} since it is not so browser compatible