<div class="controls">
<label for="flexshrink1">.item-1 flex-shrink:</label>
<select id="flexshrink1">
<option value="1">1</option>
<option value="2">2</option>
<option value="0.5">0.5</option>
<option value="0">0</option>
</select>
<label for="flexshrink2">.item-2 flex-shrink:</label>
<select id="flexshrink2">
<option value="1">1</option>
<option value="2">2</option>
<option value="0.5">0.5</option>
<option value="0">0</option>
</select>
<label for="flexshrink3">.item-3 flex-shrink:</label>
<select id="flexshrink3">
<option value="1">1</option>
<option value="2">2</option>
<option value="0.5">0.5</option>
<option value="0">0</option>
</select>
</div>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>
html {
background: #f6faff;
}
/*-- --*/
.container {
width: 40rem;
background-color: darkslategrey;
padding: 1rem;
display: flex;
flex-direction: row;
}
.item {
flex-shrink: 1;
font-size: 2rem;
line-height: 1;
text-align: center;
width: 20rem;
padding: 2rem 1rem;
background: #e2f0ef;
border: 3px solid #51aaa3;
color: #51aaa3;
margin: 6px;
}
.controls {
padding: 30px 6px;
font-size: 1.2rem;
color: #2f4f4f;
}
.controls select {
margin-right: 20px;
color: #2f4f4f;
}
$(document).ready(function(){
$("#flexshrink1").change(function () {
var flexshrink = $("#flexshrink1").val();
$(".item-1").css("flex-shrink",flexshrink);
});
$("#flexshrink2").change(function () {
var flexshrink = $("#flexshrink2").val();
$(".item-2").css("flex-shrink",flexshrink);
});
$("#flexshrink3").change(function () {
var flexshrink = $("#flexshrink3").val();
$(".item-3").css("flex-shrink",flexshrink);
});
});
This Pen doesn't use any external CSS resources.