如何在div高度变化时维持浮动网格布局（WordPress插件场景）

我需要覆盖一款WordPress插件的网格展示CSS，但无法修改HTML结构或添加新类。

现有HTML结构 #

<div class="wrapper">
<div class="box1 box"> Box1</div>
<div class="box"> Box2 </div>
<div class="box"> Box3 </div>
<div class="box"> Box4 </div>
<div class="box"> Box5 </div>
</div>

可以看到，只有wrapper容器和第一个子元素有独立类名，其余小元素都只有.box类。

已实现的基础布局 #

插件默认网格布局：

我通过以下CSS实现了预期的两排网格布局：

.wrapper {display:inline}
.box {width:25%; float:left;}
.box1 {width:50%}

当前遇到的问题 #

我希望给小的.box元素添加hover时增高的效果，但修改高度后布局会混乱：

预期hover效果：

实际错误效果：

当前测试代码 #

CSS代码 #

.wrapper {width:100%;display:inline;}
.box {width:24%; height:100px;background:red;float:left;border:1px solid white;}
.box1 {width:49%; height:200px;background:green;float:left;}
.box:hover {height:300px;}

HTML代码 #

<div class="wrapper">
<div><div class="box1"> Box1</div></div>
<div><div class="box"> Box2 </div></div>
<div><div class="box"> Box3 </div></div>
<div><div class="box"> Box4 </div></div>
<div><div class="box"> Box5 </div></div>
</div>

内容的提问来源于stack exchange，提问作者marrison