FLEX-SHRINK

Run
<!doctype html>
	<head>
		<style>
			/* CSS comes here */
            .flex-container {
              display: flex;
            }
            .flex-item {
              height: 150px;
              width: 150px;
              margin: 5px;
              font-size: 30px;
              padding: 10px;
            }
            .yellow {
              background-color: yellow;
            }
            /* The flex-shrink Property */
            .item-1 {
              flex-shrink: 2;
            }
            
            .item-2 {
              flex-shrink: 1;
            }
            
            /* Google Fonts Setup */
            body {
              font-family: "Roboto", sans-serif;
            }	
		</style>
		<title>Flex-Shrink</title>
	</head>
    <body>
      <div class="flex-container">
        <div class="flex-item item-1 yellow">1</div>
        <div class="flex-item item-2 yellow">2</div>
        <div class="flex-item item-3 yellow">3</div>
        <div class="flex-item item-4 yellow">4</div>
      </div>
    </body>
</html>