CSS 如何将 flex-container 设置为其 flex-items 的宽度？

How do i set a flex-container to be the width of its flex-items?

提问by BOverflow

I have a flex container with justify-content: flex-start. There ends up being overflow on the right side due to the flex items taking less space than the size of the container.

我有一个带有justify-content: flex-start. 由于 flex 项目占用的空间小于容器的大小，因此最终会在右侧溢出。

Aside from setting an explicit width on the flex-container, is there a way of just having the equivalent of width: autoto remove the overflow?

除了在 flex-container 上设置显式宽度之外，是否有一种方法width: auto可以消除溢出？

回答by Mahks

If you mean you want the container to be the width of the items, rather than the items expanding to the container width...

如果您的意思是希望容器成为项目的宽度，而不是项目扩展到容器宽度...

You may be able to get that by changing display:flexto display:inline-flex

您可以通过更改display:flex为display:inline-flex

回答by neaumusic

1. width: min-content(CSS3 "intrinsic" as opposed to "extrinsic")

2. display: inline-flexif you don't care whether it's inline

1. width: min-content（CSS3“内在”而不是“外在”）

2. display: inline-flex如果你不在乎它是否是内联的

If you use width: min-contenton a paragraph, the longest word determines the width.

如果width: min-content在段落上使用，最长的单词决定宽度。

.flex-container {
  display: flex;
}

.flex-inline-container {
  display: inline-flex;
}

.width-min-content {
  width: min-content;
}

.row-direction {
  flex-direction: row;
  border: 0.0625rem solid #3cf;
 }
.col-direction {
  flex-direction: column;
  border: 0.0625rem solid magenta;
}

flex
<div class='flex-container row-direction'>
  <input />
  <input type='datetime-local'>
</div>
<div class='flex-container col-direction'>
  <input />
  <input type='datetime-local'>
</div>
<br>
flex width: min-content
<div class='flex-container width-min-content row-direction'>
  <input />
  <input type='datetime-local'>
</div>
<div class='flex-container width-min-content col-direction'>
  <input />
  <input type='datetime-local'>
</div>
<br>
inline-flex
<div class='flex-inline-container row-direction'>
  <input />
  <input type='datetime-local'>
</div>

<div class='flex-inline-container col-direction'>
  <input />
  <input type='datetime-local'>
</div>

回答by BoltClock

As suggested by Mahks, you can make the flex container inline. But if laying it inline is not suitable for your layout, an alternative is to float the flex container (not the flex items).

正如 Mahks 所建议的，您可以使 flex 容器内联。但是如果内联放置不适合您的布局，另一种方法是浮动 flex 容器（而不是 flex 项目）。

Floatswill shrink-wrap to fit their contents, and this is no different for a block-level flex container. An inline-level flex container behaves similarly to an inline-block boxwhen laid out in its parent inline formatting context, which means it will also shrink to fit its contents by default.

Floats会收缩包装以适应它们的内容，这对于块级 flex 容器没有什么不同。内联级 flex 容器在其父内联格式上下文中布局时的行为类似于内联块框，这意味着默认情况下它也会缩小以适应其内容。

回答by BoltClock

not sure about your question, but:

不确定你的问题，但是：

DEMO: http://jsfiddle.net/jn45P/

演示：http: //jsfiddle.net/jn45P/

you just need to enable the flexibility on the flex items, using flex-grow:1;to fill up the space

您只需要启用弹性项目的灵活性，flex-grow:1;用于填充空间

<div class="o">
    <div>a</div><div>a</div><div>a</div><div>a</div><div>a</div>
</div>

<div class="o flex">
    <div>a</div><div>a</div><div>a</div><div>a</div><div>a</div>
</div>

div.o
{
    border:2px red solid;
    padding:2px;
    width:500px;
    flex-direction:row;
    display:flex;
    justify-content:flex-start;
}

div.o > div
    {border:2px red solid;margin:2px;}

div.o.flex > div
    {flex:1 1 auto;} /* enable flexibility on the flex-items */

回答by Corey Bo

This one worked for me on the same inline-flex (or flex) element:

这个在同一个 inline-flex（或 flex）元素上对我有用：

   width: fit-content;