Css Flexbox图像和文本

我在使用Flexbox时遇到一些困难。我想要达到的是有两个项目

第一个是图像（任意大小），第一个项目的大小（高度和宽度）应与图像的大小相同），而第二个项目是文本，文本div的宽度必须是容器的剩余大小，高度应是图像的高度

.container {
  display: flex;  
  flex-flow: row;
}
.image {
  background: hotpink;
   max-width: 100%;
   width : auto;
  flex: 0 1 auto;
}
.title {
  text-align: center;
  flex: 2;
  background: deepskyblue;
}

请让我知道我的代码发生了什么

---

蒂亚

现在还不完全清楚您想做什么，但我怀疑问题在于，您的包装器/父div是100%宽的，实际上需要的是“收缩包装”效果

为此，您需要

display:inlineflex

而不是

display:flex

…然后事情就变得容易多了

*{
保证金：0；
填充：0；
}
.集装箱{
显示：内联flex；
字体大小：粗体；
垂直对齐：顶部；
}
梅因先生{
背景：深蓝；
弹性：1；
文本对齐：居中；
}
.形象{
背景：火红；
弹性：1；
身高：100%；
}

标题

标题