CSS FLEX-使div高度适合内容

Question

编辑：由于我的问题与上面链接的另一个问题的答案不同，我更改了我的问题的措辞。

我有两列，多行弹性布局，每行有两个private static List<Children> findAssetsChildren(List<Children> children) { List<Children> result = new LinkedList<>(); for(Children ch: children) { if(ch.getLevel().equals("assets")) { result.add(ch); } result.addAll(findAssetsChildren(ch.getChildren())); } return result; } //... List<Children> children = findAssetsChildren(response.getData() .get(0).getChildren()); 元素。

我想丢失文本下方的空白，我不想指定高度，因为根据用户浏览器屏幕的宽度，固定高度可能会太小或太大。

我只想在文本下方填充20像素，我不希望文本下方有这么大的空隙，直到div结束并且下一行开始。

如何在不设置固定高度的情况下执行此操作。

P.S。当我在stackexchanges“运行代码段”中运行此代码时，它实际上给了我想要的结果！但是，如果另存为和html文件并在Chrome中打开，则它的显示方式不是这样。

<div class="flex-grid"> .. </div>

.col-xs,
.col-sm {
  position: relative;
}

.col-sm {
  float: left;
}

.col-sm {
  width: 91.66667%;
}

.flex-grid-component {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-grid-component .flex-grid {
  box-sizing: border-box;
  flex: 0 1 auto;
  display: flex;
  border: 0 solid transparent;
  flex-basis: 50%;
  max-width: 50%;
  border-width: 1.5vw;
}

.property-item-container {
  width: 100%;
  height: 100%;
  background-color: black;
  color: white;
  position: relative;
}

.property-item-container .property-details {
  display: flex;
}