与背景图象的空的儿童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的高度（就好像它是<img>元素），请使用此方法。

.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;
}

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

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