Wie stelle ich einen Flex-Container auf die Breite seiner Flex-Elemente ein?

Ich habe einen Flexcontainer mit justify-content: flex-start. Auf der rechten Seite kommt es zu einem Überlauf, da die flexiblen Elemente weniger Platz beanspruchen als die Größe des Behälters.

Gibt es neben der Einstellung einer expliziten Breite für den Flex-Container eine Möglichkeit, nur das Äquivalent width: autozu haben, um den Überlauf zu entfernen?

Wenn Sie meinen, dass der Container die Breite der Elemente haben soll, anstatt dass die Elemente auf die Containerbreite erweitert werden ...

Sie können in der Lage sein , das zu bekommen , indem display:flexaufdisplay:inline-flex

1. width: min-content (CSS3 "intrinsisch" im Gegensatz zu "extrinsisch")

2. display: inline-flex wenn es dir egal ist, ob es inline ist

Wenn Sie width: min-contenteinen Absatz verwenden, bestimmt das längste Wort die Breite.

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

Wie von Mahks vorgeschlagen, können Sie den Flex-Container inline machen . Wenn das Inline-Verlegen jedoch nicht für Ihr Layout geeignet ist, besteht eine Alternative darin, den Flex-Container (nicht die Flex-Elemente) zu schweben.

Floats werden in Schrumpffolie verpackt, um ihrem Inhalt zu entsprechen. Dies gilt nicht für einen Flex-Container auf Blockebene. Ein Flex-Container auf Inline-Ebene verhält sich ähnlich wie ein Inline-Block-Feld, wenn er im übergeordneten Inline-Formatierungskontext angeordnet ist. Dies bedeutet, dass er standardmäßig auch verkleinert wird, um seinem Inhalt zu entsprechen.

Ich bin mir nicht sicher über deine Frage, aber:

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

Sie müssen nur die Flexibilität der Flex-Elemente aktivieren flex-grow:1;, um den Raum auszufüllen

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

Dieser arbeitete für mich an demselben Inline-Flex- (oder Flex-) Element:

   width: fit-content;