Автоматическая ширина столбца flex

Question

Как установить ширину первого столбца flex так, чтобы его ширина была только размером его содержимого? http://codepen.io/anon/pen/rrKkOW

<div class="flex"> 
    <div class="inside inside-left">Left</div> 
    <div class="inside inside-right">RIght</div> 
</div> 

.flex { 
    display: flex; 
} 

.inside { 
    flex: 1; 
    border: 1px solid #000; 
} 

width: auto Установка не работает ... Что-то вроде flex-basis: content бы неплохо иметь :)

Answer 1

Не давайте этот столбец flex:1, как она будет расширяться, чтобы занять столько же места, как разрешено.

На самом деле, не давайте никаких значений гибкости, и по умолчанию он будет равен width:auto.

.flex { 
 
    display: flex; 
 
} 
 
.inside { 
 
    border: 1px solid #000; 
 
} 
 
.inside-right { 
 
    flex: 1; 
 
    background:#c0ffee; 
 
}

<div class="flex"> 
 
    <div class="inside inside-left">Left</div> 
 
    <div class="inside inside-right">RIght</div> 
 
</div> 
 

 
<div class="flex"> 
 
    <div class="inside inside-left">Left Left Left LeftLeft Left</div> 
 
    <div class="inside inside-right">RIghtRIghtRIght RIght</div> 
 
</div> 
 

 
<div class="flex"> 
 
    <div class="inside inside-left">Left Left Left LeftLeft LeftLeft Left Left LeftLeft Left</div> 
 
    <div class="inside inside-right">RIghtRIghtRIght RIghtRIghtRIght</div> 
 
</div>

EDIT: Кажется, что намерение состояло в том, чтобы каждый элемент "левый" быть того же размера.

Это невозможно с помощью flexbox, но таблицы CSS могут это сделать.

.row { 
 
    display: table-row; 
 
} 
 
.inside { 
 
    display: table-cell; 
 
    border: 1px solid grey; 
 
} 
 
.inside-left { 
 
    background: lightgreen; 
 
}

<div class="row"> 
 
    <div class="inside inside-left">Left</div> 
 
    <div class="inside inside-right">RIght</div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="inside inside-left">Left Left Left LeftLeft Left</div> 
 
    <div class="inside inside-right">RIghtRIghtRIght RIght</div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="inside inside-left">Left Left Left LeftLeft LeftLeft Left Left LeftLeft Left</div> 
 
    <div class="inside inside-right">RIghtRIghtRIght RIghtRIghtRIght</div> 
 
</div>

Answer 2

Если вы хотите, чтобы каждый столбец будет столь же широко, как его содержание, которое Вы должны использовать ALIGN-элемент: сгибать стартером проверить эту ссылку here