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

Question

我有一个Flex容器justify-content: flex-start.由于柔性物品占用的空间小于容器的尺寸,因此最终会在右侧溢出.

除了在flex容器上设置显式宽度之外,有没有办法只具有相同的width: auto去除溢出？

Answer 1

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

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

Answer 2

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

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

如果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>

Answer 3

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

   width: fit-content;

Answer 4

不确定你的问题，但是：

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

您只需要启用弹性项目的灵活性，用于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 */