我怎样才能让一个flexbox父母有其子女的宽度？ [英] How can I make a flexbox parent have the width of its children?

问题描述

我有一个父元素，里面有两个元素：

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

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

  .parent {
 display：flex; 
 background-color：aliceblue; 
 
 
 
 
 
 
 如何让父级成为其内容的宽度，而不是更广泛的？ 
 
 
 
 请参阅codebench的一个现场演示。
解决方案
更改父母的显示从 flex 到 inline-flex 。
 
 
 
  codepen演示 
 
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 {
  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.
解决方案
Change the parent's display from flex to inline-flex.

codepen demo

                        
这篇关于我怎样才能让一个flexbox父母有其子女的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！