Tự code rồi chạy thử... Chạy Thử

<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính flex-shrink trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{border:1px solid red; display: flex; width:100%; height:100px; margin-bottom:10px}
.divcha div {border:1px solid blue; flex-basis:500px}
</style>
</head>
<body>

<h1>Code Thuộc tính flex-shrink trong CSS</h1>

<p>Dùng để thu hẹp chiều rộng của các phần tử HTML xuống cho phù hợp với chiều rộng của phần tử cha, thuộc tính này hoạt động trong trường hợp tổng các giá trị flex-basis của các phần tử con lớn hơn chiều rộng của phần tử cha, nếu giá trị flex-shrink của các phần tử con bằng nhau thì chiều rộng co lại bằng nhau, nếu giá trị flex-shrink nào lớn hơn thì sẽ co lại nhiều hơn, nếu giá trị flex-shrink bằng 0 thì phần tử con sẽ không co lại mà giữ nguyên kích thước ban đầu, ngay cả khi không đủ không gian:</p>

<div class="divcha">
    <div style="flex-shrink: 1;">flex-shrink: 1;</div>
    <div style="flex-shrink: 1;">flex-shrink: 1;</div>
    <div style="flex-shrink: 2;">flex-shrink: 2;</div>
    <div style="flex-shrink: 3;">flex-shrink: 3;</div>
</div>

<div class="divcha">
    <div style="flex-shrink: 1;">flex-shrink: 1;</div>
    <div style="flex-shrink: 2;">flex-shrink: 2;</div>
    <div style="flex-shrink: 2;">flex-shrink: 2;</div>
    <div style="flex-shrink: 3;">flex-shrink: 3;</div>
</div>

<div class="divcha">
    <div style="flex-shrink: 1;">flex-shrink: 1;</div>
    <div style="flex-shrink: 1;">flex-shrink: 1;</div>
    <div style="flex-shrink: 1;">flex-shrink: 1;</div>
    <div style="flex-shrink: 3;">flex-shrink: 3;</div>
</div>

</body>
</html>

Code Thuộc tính flex-shrink trong CSS nằm trong bài viết Thuộc tính flex-shrink trong CSS