а так? https://jsfiddle.net/bc09otfk/12/

Не то. Это просто постоянная ширина рамок для любого размера контейнера. Задаётся просто пиксельной величиной.

У меня на примере с зелёными шкалами видите - если шкала увеличилась по минимальной стороне, то и рамки увеличились.

Я сформулировал своё требование простым правилом: ширина рамки должна быть столько-то процентов (скажем 10) от длины минимальной стороны. Это простой вариант, который можно реализовать с одним контейнером. А потом для усложнения (и чтобы было больше не шкалу похоже) добавил требования для разных цветов фона, заполнения и рамок шкалы. Реализовать это надо скорее всего двумя контейнерами.

Давайте более конкретно сформулирую:

- ширина рамки должна быть 10% от минимального размера контейнера (width or height);

- фон должен быть серым, рамка чёрной, заполнение зелёным;

- величиная заполнения 25%;

- без джаваскрипта.

Величина заполнения пока статическая - для тестов, чтобы видно было все три цвета.

Я сейчас в своей программе создаю эти элементы динамически, поэтому могу кодом посчитать значение рамки в зависимости от заданных ширины и высоты. Но надо сделать, чтобы она изменялась динамический при изменении рамеров контейнера. Чтобы не перехватывать разные события изменения размеров и не считать всё снова, надо сделать всё средствами чисто CSS и HTML. Чтобы браузер сам всё перехватывал и пересчитывал.