Undesired overflow of CSS columns

https://stackoverflow.com/questions/54270254/undesired-overflow-of-css-columns

by draex

HTML

<!--
Stack Overflow question:
Undesired overflow of CSS columns
https://stackoverflow.com/questions/54270254/undesired-overflow-of-css-columns
-->

<div>
	I'd like to have a list with several columns
	<ul>
		<li>A list</li>
		<li>like this</li>
		<li>with unknown</li>
		<li>number of items</li>
		<li>and columns.</li>
	</ul>
	in the middle of other text.
</div>

CSS

div {
	font-size: 30px;
	padding: 30px;
  width: 450px;
}

ul {
	display: inline-block;
	column-width: 35px;
	height: 35px;
	
	padding: 0;
	list-style: none;
	font-size: 10px;

	vertical-align: middle;

	/* 
		Setting margin fixes the issue
    for specific number of columns.
    
    But we don't know how many 
    columns there will be.
	*/
	/* margin-right: 170px; */
}

li {
	background: #ff9b06 /*#9eff80*/; 
	padding: 2px;
	opacity: 0.7;
}

JavaScript

/* preferably no JS */