1：1纵横列，其他收缩/增长

Question

我正在尝试构建一个布局，如下所示：

图像是方形的，应始终为容器的整个高度（和宽度）。内容是可变高度，应垂直居中。

到目前为止，我已经尝试过使用flexbox，但是当我可以将图像设置为全高时，我无法使其适应宽度。最终看起来像这样：

也许使用display: table可能会更好，但是我找不到任何好的文档。有什么建议吗？

.container {
  border: 2px solid red;
  width: 60%;
  display: flex;
  flex-direction: row;
}

.container > * {
  border: 2px solid blue;
}

.container .avatar img {
  height: 100%;
}

.container .avatar {
  
}

.container .content {
  flex: 1;
  display: flex;
  align-items: center;
}

.container .content p {
  margin-bottom: 100px;
}

<div class="container">
    <div class="avatar">
      <img src="https://placehold.it/100x100">    
    </div>
    <div class="content">
      <p>Some text balh blah
    </div>
</div>

Answer 1

我设法自己解决了这个问题，使用了一个在codepen上发现的技巧（遗憾的是我还没有源链接，或者我链接了更多信息）。可以使用{1}}修复要保留的列1：1：

:after