如何动态更改div的高度以适应全高行？

Question

我有一个完整的高度页面，假设高度是900px。该页面有一个右侧边栏，在侧边栏中我有2个带文字+图像的块。我想动态更改块的高度，以防止在页面上滚动。这是什么最好的做法？

1. 我应该使用Javascript计算尺寸吗？
2. 也许通过媒体查询我可以做到这一点，但它不会是完美的。

目前我正在使用媒体查询：

.blocks {
    height: 200px;
}

.blocks p {
    font-size: 12px;
}

.blocks img {
    height: 150px;
}

@media screen and (min-height: 700px) {
    .blocks {
        height: 300px;
    }

    .blocks p {
        font-size: 14px;
    }

    .blocks img {
        height: 250px;
    }
}

不幸的是，媒体查询并不是最好的，但我不想使用javascript来计算尺寸，我希望有更好的解决方案，只有css。 flexbox对此有好处吗？