如何让flexbox父项具有子项的宽度?

时间:2021-12-06 17:09:28

I have a parent element, with two elements inside:

我有一个父元素,里面有两个元素:

<div class="parent">
  <div class="child">
     one
  </div>
  <div class="child">
    two
  </div>
</div>

Currently, the .parent is 100% wide. I would like it only to be the width of the two children.

目前,.parent是100%宽。我希望它只是两个孩子的宽度。

.parent {
  display: flex;
  background-color: aliceblue;
}

How can I make the parent to be the width of it's contents, and not wider?

如何让父母成为其内容的宽度,而不是更宽?

See codepen for a live demo.

请参阅codepen以获得实时演示。

1 个解决方案

#1


27  

Change the parent's display from flex to inline-flex.

将父显示从flex更改为inline-flex。

codepen demo

#1


27  

Change the parent's display from flex to inline-flex.

将父显示从flex更改为inline-flex。

codepen demo