修复 flexbox 子项上的显示值更改。内联块被覆盖

Question

我最近开始使用 flexbox，这是我运行遇到的第一个问题。我希望下面的 .wrp class 保持 display: inline-block; 但有一行似乎禁用了该值。该行是：flex-direction: column。当我删除该行时，我的 .wrp class 再次开始表现得像 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>

希望对您有所帮助！ :)

修复 flexbox 子项上的显示值更改。内联块被覆盖

Fix display value changing on child of flexbox. Inline-block being overridden

html

css

flexbox

display