EDIT 2:
See also Mozilla bug
EDIT 1:
C'mon? I'm guessing the padding-right trick won't work with border-box anyway?
Surely there's some combo of max/min -width that will do the trick?
Original Post:
I know this question is similar to previous questions like this but mine is much more narrow.
Specifically I'm only seeking a solution to Firefox desktop as FF on android mobile, and all other browser combos provide a supported and simple way of turning off scrollbars. For example: -
::-webkit-scrollbar {display:none;}
-ms-overflow-style: none;
And whatever combo of flexi-box and box-sizing just works (tm) on all other UA implementations. (See example/demo code below).
Now I can calculate FF scrollbar width and add that as padding but do I really have to?
Q. Has anything from Mozilla replaced -moz-scrollbars-none since it was deprecated here?
Illustrated problem: -
<!DOCTYPE html>
<html>
<head>
<!-- The "viewport" tag is needed to stop font-size changes landscape/portrait -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ask for fullscreen Web App -->
<link rel="manifest" href="layout.json">
<style type="text/css">
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
height: 100vh;
margin: 0;
box-sizing: border-box;
font-size: 16px;
-ms-overflow-style: none;
}
.topbar {
display: flex;
width: 100%;
align-items: center;
}
.containerrow1 {
margin: 15px;
padding: 15px;
display: flex;
flex: 2;
background-color: yellow;
}
.containerrow2 {
margin: 15px;
padding: 15px;
display: flex;
flex: 17;
background-color: aliceblue;
min-height: 0; /* new; resolves Firefox bug */
min-width: 0; /* new; resolves Firefox bug */
}
.containerrow3 {
padding: 15px;
display: flex;
flex: 1;
background-color: yellow;
}
.outercontainer {
display: flex;
flex-direction: column;
background-color: black;
height: 100%; /* new */
}
.section {
display: flex;
flex-direction: column;
background-color: aliceblue;
height: 100vh;
box-shadow: inset 0 0 8px orange;
padding: 5px;
}
main {
width:100%;
height: 100%;
overflow: auto;
}
#myDIV {
display: block;
height: 100%;
width: 100%;
overflow-x: hidden;
border: 3px solid green;
overflow-y: auto;
pading-right: 25px;
}
#myDIV2 {
height: 100%;
width: 100%;
overflow-x: hidden;
border: 3px solid green;
overflow-y: auto;
box-sizing: border-box;
pading-right: 25px;
}
#listDiv {
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
<script type="application/javascript">
function myFunction() {
var elmnt = document.getElementById("myDIV");
var x = elmnt.offsetHeight;
var y = elmnt.scrollTop;
document.getElementById ("demo").innerHTML = "Horizontally: " + x + "px<br>Vertically: " + y + "px";
}
</script>
</head>
<body class='section'>
<div class="outercontainer">
<div class="containerrow1">
<div class="topbar">Blah</div>
</div>
<div class="containerrow2">
<main>
<div id="myDIV" onscroll="myFunction()">
<div id="listDiv">Scroll inside me!</div>
</div>
<div id="myDIV2">
<div>
lots of stuff
</div>
<p id="demo">www</p>
</div>
</main>
</div>
<div class="containerrow3">
<div class="topbar">footer</div>
</div>
</div>
</body>
</html>
