Html 修复flexbox子级上显示值的更改。正在重写的内联块

我最近开始使用flexbox，这是我遇到的第一个问题。我希望下面的

.wrp

类保持

显示：内联块但有一行似乎禁用了此值。那一行是：
flex-direction:column
。当我删除该行时，
wrp
类再次开始像
内联块
元素一样运行，但随后它当然会丢失它的
flex direction
值。有没有一个简单的解决方案，它不需要对我的HTML进行太多的重新构造，就可以保持flexbox的
flex direction
行为，同时还可以保持
.wrp
上的内联块行为


.cont{
显示器：flex；
flex direction:column；/*此行似乎在.wrp上打断了我的显示*/
证明内容：中心；
高度：10雷姆；
背景色：#eee；
}
.wrp{
显示：内联块；
身高：5雷姆；
背景色：#ddd；
}
p{
宽度：100%；
背景色：#ccc；
}

我想把这一段延伸以适应它的内容。不是全宽的

在flex中不能有
内联块
元素。看起来您可能正在查找
display:inline table
：


.cont{
显示器：flex；
flex direction:column；/*此行似乎在.wrp上打断了我的显示*/
证明内容：中心；
高度：10雷姆；
背景色：#eee；
}
.wrp{
显示：内联表；
身高：5雷姆；
背景色：#ddd；
}
p{
宽度：100%；
背景色：#ccc；
}

我想把这一段延伸以适应它的内容。不是全宽的

禁用孩子的
显示：内联块
的不是
弹性方向
。这是
display:flex
实现的。当您建立flex容器时，子容器将自动被阻止。flex项目上任何指定的
display
值都将被忽略。这是规范中的规则。但显然，正如下面的答案所示，
display:inline table
是一个例外。@Michael_B似乎是
flex direction
和
display:flex
。您的解决方案改变了整个flex容器的宽度和/或行为，这就是我选择前一个解决方案的原因，它似乎可以隔离问题并修复它，而不会产生任何副作用。公认的答案似乎是一个黑客。同样，浏览器应忽略flex项目上声明的
显示
值。我不会依赖这个解决方案，因为浏览器最终可能会符合规范。
.wrp
必须是内容宽度，还是仅仅是
p
（如您的代码注释所述）？关于
display:inline table
在这种情况下的工作原理有什么见解吗？谢谢