.example-lists {
	resize: both;
	overflow: auto;
	padding: 1em;
	border: 1px dashed silver;	
	text-align: center;
	width: 400px;
	height: 500px;
	min-width: 100px;
	min-height: 90px;
}

/* CSS based on https://stackoverflow.com/a/37053489 */
.flex-list ul {
	margin: 0;
}
.flex-list ul li {
	display: inline;
	line-height: 1.67em;
}
.flex-list ul li::before {
	content: ' '; /* this content is needed by Chromium in case the HTML will be minified with no whitespaces between </li><li> */
}
.flex-list ul li::after {
	content: ' ';
	white-space: normal;
	word-spacing: 1em;
	background: radial-gradient(circle, #555, #555 15%, transparent 25%)  50%/1em no-repeat;
}
.flex-list ul li > a {
	white-space: nowrap; /* this cannot be under 'li' as IE has wrapping problems: it puts 'nowrap' on the entire list */
}