hbuilder3个盒子防止高度坍塌

在HBuilder中，我们可以使用Flex布局来防止高度坍塌。具体方法如下：

1. 在父容器上设置display: flex;属性，开启Flex布局。

2. 设置flex-direction: column;属性，使子元素从上到下排列。

3. 将中间的盒子设置为flex-grow: 1;属性，使其自动填充剩余空间。

4. 将顶部和底部的盒子设置为固定高度，例如height: 100px;。

示例代码如下：

<div style="display: flex; flex-direction: column; height: 300px;">
  <div style="height: 100px; background-color: red;"></div>
  <div style="flex-grow: 1; background-color: green;"></div>
  <div style="height: 100px; background-color: blue;"></div>
</div>

这样就可以防止高度坍塌，同时让中间的盒子自动填充剩余空间。