Антон Федорян

https://jsfiddle.net/slippyk/wykrcx7z/

https://jsfiddle.net/slippyk/oqd7tafu/

Почему блок заходит на плавающий блок?

- float выводит документ из потока

div {
  border: 2px solid;
  display: flex;
}

.a {
  height: 3rem;
  width: 3rem;
}

.b {
  flex-grow: 1;
  height: 3rem;
  border: 4px solid #f00;
}

https://jsfiddle.net/slippyk/7a4Ljx3y/

https://jsfiddle.net/slippyk/vsmq7qck/

https://jsfiddle.net/slippyk/ey3j4a8g/1/

https://jsfiddle.net/slippyk/81wx5h48/

Фактически маленький будет не вложен в большой, а будет лежать на нем в вашем случае.
Почему в position не подходит?
https://jsfiddle.net/slippyk/c638Lg34/

Рамка задается так же, свойством border
https://jsfiddle.net/slippyk/v4w7wgqc/

Можно так как вариант jsfiddle.net/yk62zsxv/24

А если добавить line-height: 130px;