Sử dụng flexShrink để đặt mức độ mục sẽ thu nhỏ so với phần còn lại bằng JavaScript.
Ví dụ
Bạn có thể thử chạy mã sau để tìm hiểu cách làm việc với flexGrow tài sản -
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 1px solid #000000;
width: 500px;
height: 100px;
display: flex;
}
#box div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;
}
</style>
</head>
<body>
<div id = "box">
<div style = "background-color:orange;">DIV1</div>
<div style = "background-color:yellow;" id = "myID">DIV2</div>
</div>
<p>Using flexShrink property</p>
<button onclick = "display()">Set</button>
<script>
function display() {
document.getElementById("myID").style.flexShrink = "5";
}
</script>
</body>
</html>