magnushammar/fix-scrollbar-problem-view-width.html

## fix-scrollbar-problem-view-width.html
<html>

<head>
    <style>
        :root {
            /* Some browsers ignore the scrollbar width others not
               https://stackoverflow.com/a/34884924 */
            --view-width-100: calc(100vw - (100vw - 100%));
            --page-margin: 10px;
            --page-gutter: 10px;
            --page-width: calc(var(--view-width-100) - calc(var(--page-margin) * 2));
        }

        html,
        body {
            align-items: flex-start;
            display: grid;
            justify-items: center;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        main {
            margin: var(--page-margin) 0;
            display: grid;
            justify-items: stretch;
            width: var(--page-width);
            grid-gap: var(--page-gutter);
        }

        .one-column {
            background-color: pink;
            height: 100px;
        }

        .two-column {
            display: grid;
            justify-items: stretch;
            grid-gap: var(--page-gutter);
            grid-template-columns: 1fr 1fr;
        }

        .two-column section {
            background-color: lightgreen;
            height: 100px;
        }
    </style>
</head>

<body>
    <main>
        <article class="one-column">
            <section>
                One column
            </section>
        </article>
        <article class="two-column">
            <section>
                First Column
            </section>
            <section>
                Second Column
            </section>
        </article>
    </main>
</body>

</html>
	<html>

	<head>
	<style>
	:root {
	/* Some browsers ignore the scrollbar width others not
	https://stackoverflow.com/a/34884924 */
	--view-width-100: calc(100vw - (100vw - 100%));
	--page-margin: 10px;
	--page-gutter: 10px;
	--page-width: calc(var(--view-width-100) - calc(var(--page-margin) * 2));
	}

	html,
	body {
	align-items: flex-start;
	display: grid;
	justify-items: center;
	margin: 0;
	padding: 0;
	width: 100%;
	}

	main {
	margin: var(--page-margin) 0;
	display: grid;
	justify-items: stretch;
	width: var(--page-width);
	grid-gap: var(--page-gutter);
	}

	.one-column {
	background-color: pink;
	height: 100px;
	}

	.two-column {
	display: grid;
	justify-items: stretch;
	grid-gap: var(--page-gutter);
	grid-template-columns: 1fr 1fr;
	}

	.two-column section {
	background-color: lightgreen;
	height: 100px;
	}
	</style>
	</head>

	<body>
	<main>
	<article class="one-column">
	<section>
	One column
	</section>
	</article>
	<article class="two-column">
	<section>
	First Column
	</section>
	<section>
	Second Column
	</section>
	</article>
	</main>
	</body>

	</html>