修复弹性框子项上的显示值更改.内联块被覆盖

Question

我最近开始使用flexbox，这是我遇到的第一个问题。我希望下面的.wrp类保持display: inline-block;但一行似乎禁用了此值。那行是：flex-direction: column。当我删除该行时，我的.wrp类再次开始表现得像一个inline-block元素，但当然它会失去它flex-direction价值。有没有一个简单的解决方案，不需要过多地重组我的 HTML 来保持 flexbox 的flex-direction行为，但也保持.wrp的内联块行为？

.contr {
  display: flex;
  flex-direction: column; /* this line seems to be breakig my display on .wrp */
  justify-content: center;
  height: 10rem;
  background-color: #eee;
}
.wrp {
  display: inline-block;
  height: 5rem;
  background-color: #ddd;
}
p {
  width: 100%;
  background-color: #ccc;
}

<div class="contr">
  <div class="wrp">
    <p>I want this paragraph to stretch to fit it's content. Not full width.</p>
  </div>
</div>

Answer 1

flex 中不能有 inline-block 元素。看起来您可能正在寻找display: inline-table：

.contr {
  display: flex;
  flex-direction: column; /* this line seems to be breakig my display on .wrp */
  justify-content: center;
  height: 10rem;
  background-color: #eee;
}
.wrp {
  display: inline-table;
  height: 5rem;
  background-color: #ddd;
}
p {
  width: 100%;
  background-color: #ccc;
}

<div class="contr">
  <div class="wrp">
    <p>I want this paragraph to stretch to fit it's content. Not full width.</p>
  </div>
</div>

希望这有帮助！ :)