如何将一个 Flex 容器设置为它的 flex 条目的宽度？

not sure about your question, but:

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

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

<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 */

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:flex to display:inline-flex

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).

Floats will 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 box when laid out in its parent inline formatting context, which means it will also shrink to fit its contents by default.

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

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

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

.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>

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

   width: fit-content;