空子div的背景图片占据父div高度的100％

Question

发现强制子div占据其背景图像的整个高度并不是一件容易的事。 有六个强制性术语：

1. 两个div的确切高度都是未知的
2. 子div为空
3. 背景图片大小：cover
4. display: flex
5. 没有javascript
6. 这是列表项（因此没有全屏显示）

.item { 
  display: flex; 
  border: 1px solid red; 
  height: 100%; 
}
.inner { 
  background: url('https://images.unsplash.com/photo-1504608524841-42fe6f032b4b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80') center center / cover no-repeat; 
  border: 1px solid blue;
  width: 100%;
  height: 100%;
}

<div class='item'>
  Inner content
  <div class='inner'></div>
</div>

在SO上找到的所有类似问题都无法通过全部或部分条款。
对于任何想法（尤其是grid专家的想法）将不胜感激。

Answer 1

要让图像确定内部div的高度（就好像它是元素一样），请使用

。

    Ddcomparator comparator = new Ddcomparator();
    Collections.sort(drivDataList, comparator);
    int counter = c.getCounter();

.item { 
  display: flex; 
  border: 1px solid red; 
  height: 100%; 
}

.inner { 
  border: 1px solid blue;
}

.inner::before {
  font-size:0;
  content: url('https://images.unsplash.com/photo-1504608524841-42fe6f032b4b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80');
  display:block;
}

请注意，这会回答问题正文第一句中的问题，这与标题中的问题不同。