Учусь JavaScript, вот скрипт, который помогает подобрать итоговые размеры для трёх элементов.
За качество кода не ругайте, я новичок 

Сохраняете содержимое кода в index.html и открываете через любой браузер (желательно не IE):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Подбор flex-shrink для трёх элементов</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<style>
label, input {
margin-top: 5px;
}
input {
width: 70px;
text-align: center;
margin-left: auto;
}
label[for="finalSizeElement1"], #finalSizeElement1 {
margin-top: 15px;
}
.container {
width: 350px;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
align-items: baseline;
border: 1px solid black;
padding: 10px;
}
form {
display: flex;
justify-content: center;
margin-top: 30px;
}
</style>
<form>
<div class="container">
<label for="containerWidth">Ширина контейнера, px</label>
<input type="number" id="containerWidth" value="300" step="10">
<label for="flexBaseSize1">Базовый размер элемента 1, px</label>
<input type="number" id="flexBaseSize1" value="120" step="10">
<label for="flexBaseSize2">Базовый размер элемента 2, px</label>
<input type="number" id="flexBaseSize2" value="100" step="10">
<label for="flexBaseSize3">Базовый размер элемента 3, px</label>
<input type="number" id="flexBaseSize3" value="100" step="10">
<label for="flexShrink1">flex-shrink элемента 1</label>
<input type="number" id="flexShrink1" value="1" min="0">
<label for="flexShrink2">flex-shrink элемента 2</label>
<input type="number" id="flexShrink2" value="1" min="0">
<label for="flexShrink3">flex-shrink элемента 3</label>
<input type="number" id="flexShrink3" value="1" min="0">
<label for="finalSizeElement1">Итоговый размер первого элемента, px</label>
<input type="number" id="finalSizeElement1">
<label for="finalSizeElement2">Итоговый размер второго элемента, px</label>
<input type="number" id="finalSizeElement2">
<label for="finalSizeElement3">Итоговый размер третьего элемента, px</label>
<input type="number" id="finalSizeElement3">
</div>
</form>
<script async>
var containerWidth = document.getElementById('containerWidth');
var flexBaseSize1 = document.getElementById('flexBaseSize1');
var flexBaseSize2 = document.getElementById('flexBaseSize2');
var flexBaseSize3 = document.getElementById('flexBaseSize3');
var flexShrink1 = document.getElementById('flexShrink1');
var flexShrink2 = document.getElementById('flexShrink2');
var flexShrink3 = document.getElementById('flexShrink3');
function raschet() {
var op = (containerWidth.value - flexBaseSize1.value - flexBaseSize2.value - flexBaseSize3.value);
var spbr = ((flexBaseSize1.value * flexShrink1.value) + (flexBaseSize2.value * flexShrink2.value) + (flexBaseSize3.value * flexShrink3.value));
var nks1 = +(flexBaseSize1.value * flexShrink1.value / spbr);
var nks2 = +(flexBaseSize2.value * flexShrink2.value / spbr);
var nks3 = +(flexBaseSize3.value * flexShrink3.value / spbr);
var finalSizeElement1 = document.getElementById('finalSizeElement1');
var finalSizeElement2 = document.getElementById('finalSizeElement2');
var finalSizeElement3 = document.getElementById('finalSizeElement3');
finalSizeElement1.value = +(flexBaseSize1.value - (-1 * nks1 * op));
finalSizeElement2.value = +(flexBaseSize2.value - (-1 * nks2 * op));
finalSizeElement3.value = +(flexBaseSize3.value - (-1 * nks3 * op));
}
raschet();
flexShrink1.onchange = function() {
raschet();
};
flexShrink2.onchange = function() {
raschet();
};
flexShrink3.onchange = function() {
raschet();
};
flexBaseSize1.onchange = function() {
raschet();
};
flexBaseSize2.onchange = function() {
raschet();
};
flexBaseSize3.onchange = function() {
raschet();
};
containerWidth.onchange = function() {
raschet();
}
</script>
</body>
</html>