EXAMPLE
Run 
<!DOCTYPE html>
<html>

<head>
	<title>The flex-basis property in CSS</title>
	<style type="text/css">
		.container {
		  font-family: arial, sans-serif;
		  margin: 0;
		  padding: 0;
		  list-style-type: none;
		  display: flex;
		  flex-wrap: wrap;
		}
		
		.flex {
		  background: pink;
		  padding: 10px;
		  margin-bottom: 50px;
		  border: 3px solid red;
		  color: white;
		  font-size: 14px;
		  text-align: center;
		  position: relative;
		}
		
		.flex:after {
		  position: absolute;
		  z-index: 1;
		  left: 0;
		  top: 100%;
		  margin-top: 10px;
		  width: 100%;
		  color: deeppink;
		  font-size: 12px;
		}
		
		.flex1 {
		  flex-basis: min-content;
		}
		
		.flex1:after {
		  content: 'min-content';
		}
		
		.flex2 {
		  flex-basis: fill;
		}
		
		.flex2:after {
		  content: 'fill';
		}
		
		.flex3 {
		  flex-basis: min-content;
		}
		
		.flex3:after {
		  content: 'min-content';
		}
		
		.flex4 {
		  flex-basis: fill;
		}
		
		.flex4:after {
		  content: 'fill';
		}
		
		.flex5 {
		   flex-basis: content;
		}
		
		.flex5:after {
		  content: 'content';
		}
		
		.flex6 {
		  flex-basis: min-content;
		}
		
		.flex6:after {
		  content: 'min-content';
		}
	</style>
</head>

<body>
	<ul class="container">
		<li class="flex flex1">Study Tonight</li>
		<li class="flex flex2">Study Tonight</li>
		<li class="flex flex3">Study Tonight</li>
		<li class="flex flex4">Study Tonight</li>
		<li class="flex flex5">Study Tonight</li>
	</ul>
	<ul class="container">
		<li class="flex flex6">Study Tonight</li>
	</ul>
</body>

</html>