Дмитрий

Немного отдохнув, и решение пришло само.
Значит так, все изначально было правильно мною построено, как изначально изложил код -

.conteiner {
   display: flex;
   flex-wrap: wrap;
}
.shortstory {
    flex: 1 1 25%;
    min-width: 261px;
    padding: 0 10px 20px 10px;
}

То есть, колонки имеют минимум ширину 261 пиксель, достигнув предела по ширине лишний блок будет переносится на новый ряд, что в итоге он и будет заполнять его на все 100% так как блокам изначально поставлен flex-grow: 1. Если мы хотим получить полную заполняемость ряда, и чтобы блоки распределяли поровну всю ширину, выставляем flex-grow: 1, а не flex-grow: 0, тогда все будет ок.
Но, что же делать с тем блоком, который переносится и растягивается на всю ширину колонки нарушая внешний вид? Ответ был прост и понятен изначально, просто я немного тупанул.
Я изначально выстроил в один ряд 4 колонки, на странице разместил всего 2 ряда, то есть 8 блоков, но если мы начнем сужать страницу, с каждого ряда отваливается по одному блоку, которые заполнят уже новый созданный ряд и заполнят его поровну, что в итоге получим 2 блока больше других.
Значит стоит сделать вывод, что нужно разместить на странице не 8 блоков, а 12, таким образом при сужении будет отваливаться уже не два блока, а три, что в итоге везде будет поровну.
Вот и решение вопроса.

Большая благодарность за решение Comsequent!

<div class="inputs-wrapper">
        <div class="cooking">
            <p>Время готовки:</p>
        <input class="hour cooking-hours" type="text" name="clock_hour" value="0">
        <input class="minut cooking-mins" type="text" name="clock_minut" value="0">
        </div>
        <div class="prep">
            <p>Время подготовки:</p>
            <input class="hour prep-hours" type="text" name="clock_hour1" value="0">
            <input class="minut prep-mins" type="text" name="clock_minut1" value="0">
        </div>
    </div>
    <div class="output-wrapper">
        <p>
            Общее время: 
            <span class="total-hours">00</span>:
            <span class="total-mins">00</span>
        </p>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function(){
            let inputs = document.getElementsByTagName('input');
            for(let i = 0; i < inputs.length; i++){
                let input = inputs[i];
                input.addEventListener('change', function(e){
                    let timeInSeconds = valuesToSeconds();
                    sec2time(timeInSeconds);
                });
            }
        });

        function valuesToSeconds(){
            let totalSeconds = document.getElementsByClassName("cooking-hours")[0].value * 3600 +
                document.getElementsByClassName("cooking-mins")[0].value  * 60 + 
                document.getElementsByClassName("prep-hours")[0].value * 3600 + 
                document.getElementsByClassName("prep-mins")[0].value   * 60;
            return totalSeconds;
        }

        function sec2time(timeInSeconds) {
            var pad = function(num, size) { return ('000' + num).slice(size * -1); },
            time = parseFloat(timeInSeconds).toFixed(3),
            hours = Math.floor(time / 60 / 60),
            minutes = Math.floor(time / 60) % 60,
            seconds = Math.floor(time - minutes * 60),
            milliseconds = time.slice(-3);
            setOutput(pad(hours, 2), pad(minutes, 2));
        }

        function setOutput(hours, minutes) {
            document.getElementsByClassName("total-hours")[0].innerText = hours;
            document.getElementsByClassName("total-mins")[0].innerText = minutes;
        }
    </script>