После того, как вы объяснили значение высоты границы, теперь я понимаю, что вы имеете в виду, как упоминалось ранее, ваши h-100 классы являются проблемой.
Этот класс говорит элементу использовать 100% его Высота родительского элемента, поскольку вы помещаете этот класс в основные элементы container и row, эти два элемента используют полноэкранную высоту, поскольку родительским элементом контейнера является окно браузера, а родительским элементом строки является контейнер.
Когда вы используете тот же класс для дочернего элемента div, в данном случае для красного элемента div, он также пытается использовать полную высоту своего родителя (строки), но он не учитывает другой элемент внутри ( синий div), если вы удалите класс h-100 из красного div, то каждый из них будет использовать половину доступного пространства.
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.bottom-border {
border-bottom: 50px solid yellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container-fluid h-100">
<div class="row h-100 flex-column flex-md-row">
<div class="col-md-8 bg-primary">
<div class="d-md-none text-center bg-primary">
<h5>Left Section</h5>
</div>
<div class="d-none d-md-block m-3">
<h1>Left Section</h1>
</div>
</div>
<div class="col-md-4 flex-grow-1 text-center bg-danger bottom-border">
<h4>Right Section</h4>
</div>
</div>
</div>
</body>