Как установить гибкий контейнер как ширину его гибких элементов?

У меня есть гибкий контейнер с justify-content: flex-start. В результате происходит переполнение с правой стороны из-за того, что элементы гибкости занимают меньше места, чем размер контейнера.

Помимо установки явной ширины в гибком контейнере, существует ли способ иметь эквивалент width: auto для удаления переполнения?

Ответ 1

Если вы хотите, чтобы контейнер был шириной элементов, а не элементов, расширяющихся до ширины контейнера...

Вы можете получить это, изменив display:flex на display:inline-flex

Ответ 2

Как было предложено Mahks, вы можете сделать гибкий контейнер встроенным. Но если укладка его встроенного не подходит для вашего макета, альтернативой является поплавок гибкого контейнера (а не элементы гибкости).

Поплавки будут сжиматься, чтобы соответствовать их содержимому, и это не отличается для контейнера flex на уровне блока. Гибкий контейнер inline-уровня ведет себя аналогично блоку встроенного блока, если он изложен в контексте родительского встроенного форматирования, что означает, что он также сократится чтобы поместить его содержимое по умолчанию.

Ответ 3

width: min-content (CSS3 "внутренний", а не "внешний")
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>

Ответ 4

не уверен в вашем вопросе, но:

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

вам просто нужно включить гибкость элементов flex, используя 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 */

Ответ 5

Я не уверен, почему никто не включил это, но ответ - width: min-content

.flex-container {
  display: flex;
  width: min-content;
}

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

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

Ответ 6

Этот работал для меня на том же элементе inline-flex (или flex):

   width: fit-content;