Element flex przekracza swój kontener

Question

Mam elastyczny kontener o zdefiniowanej wartości width. Kontener ma flex-direction: row i 2 kolumny. Jedna to stała szerokość, jest nieelastyczna. Drugi jest elastyczny i powinien pasować do pozostałej przestrzeni kontenera.

Gdy elastyczna zawartość kolumny to wystarczająco długo przepełnia ona kontener, przekracza jego szerokość.

Dlaczego tak się dzieje? I jak mam to naprawić w odpowiedni sposób?

Uwaga: Rozwiązałem już to za pomocą flex: 1 0 0 zamiast 1 0 auto i wszystko byłoby dobrze. Ale nie rozumiem, dlaczego przestaje przekraczać rodzica i dlaczego zaczyna owijać zawartość? Czy jest to nawet sposób na zrobienie tego?

HTML:

<div class="flex-container"> 
    <div class="flex-item inflexible"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    </div> 
    <div class="flex-item flexible"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    </div> 
</div> 

CSS:

.flex-container { 
    display: flex; 
    flex-direction: row; 
    width: 500px; 
    background-color: green; 
} 

.flex-item { 
    display: block; 
    margin: 20px 0; 
} 

.inflexible { 
    flex: 0 0 auto; 
    width: 100px; 
    background-color: red; 
} 

.flexible { 
    flex: 1 0 auto; 
    background-color: blue; 
} 

JSFiddle

Answer 1

Aby osiągnąć oczekiwany rezultat, należy określić szerokość dla .flexible klasy także

.flexible { 
      flex: 1 0 auto; 
      width:200px; 
      background-color: blue; 
      word-wrap:break-word; 
    } 

http://codepen.io/nagasai/pen/LkJzLz

Answer 2

Myślę, że nieporozumienie jedną lub dwie wartości flex tutaj, jeśli ja rozumiem poprawnie. Rozważmy następujący codepen:

http://codepen.io/anon/pen/NALvPw

to sprawdzić:

.your-flex-item { /*(child, not container)*/ 
    flex: <flex-grow> <flex-shrink> <flex-basis>; 
} 

Yours było:

.inflexible { 
    flex: 0 0 auto; 
    width: 100px; 
    background-color: red; 
} 

.flexible { 
    flex: 1 0 auto; 
    background-color: blue; 
} 

Jeśli wolisz robić to w ten sposób, proponuję zmianę wartości do auto żądana szerokość, więc więcej takich:

.inflexible { 
    flex: 0 0 100px; /*auto changed to 100px*/ 
    width: 100px; 
    background-color: red; 
} 

.flexible { 
    flex: 1 0 auto; /* 1 0 auto will grow to whatever 'auto' will allow it to grow to. Put in size here for it to grow 'up-to' that size. */ 
    background-color: blue; 
} 

Answer 3

Zaktualizuj flex: 1 0 auto; do tylko flex: 1 w .flexible. I usuń flex: flex: 0 0 auto; z .inflexible.

Aby zrozumieć więcej na temat sprawdzania schematu flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Updated Fiddle.

.flex-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 500px; 
 
    background-color: green; 
 
} 
 
.flex-item { 
 
    display: block; 
 
    margin: 20px 0; 
 
} 
 
.inflexible { 
 
    flex: 0 0 auto; 
 
    width: 100px; 
 
    background-color: red; 
 
} 
 
.flexible { 
 
    flex: 1 0 auto; 
 
    background-color: blue; 
 
} 
 
.solution .flexible { 
 
    flex: 1 0 0; 
 
} 
 
.question { 
 
    margin-bottom: 20px; 
 
}

<div class="question"> 
 
    <div class="flex-container"> 
 
    <div class="flex-item inflexible"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, cupiditate earum quos! Laborum quibusdam dolor temporibus corporis 
 
    </div> 
 
    <div class="flex-item flexible"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi sed ab voluptatum obcaecati repudiandae, quia architecto ipsa deserunt recusandae dolorum harum, aperiam sint, molestias iure voluptatem doloremque. In, rem. 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="solution"> 
 
    <div class="flex-container"> 
 
    <div class="flex-item inflexible"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, cupiditate earum quos! Laborum quibusdam dolor temporibus corporis 
 
    </div> 
 
    <div class="flex-item flexible"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi sed ab voluptatum obcaecati repudiandae, quia architecto ipsa deserunt recusandae dolorum harum, aperiam sint, molestias iure voluptatem doloremque. In, rem. 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

Z flex: 1 0 auto w .flexible ustawić następujące

1. 1 jest flex-grow i jego zestaw rosnąć
2. 0 jest flex-shrink więc, że ustawienie nie kurczą
3. auto to flex-basis, która w tym przypadku odnosi się do width, która jest określona przez zawartość elementu flex.

Również nie można użyć display: block w flex-container, który nie działa. Domyślną wartością kierunku flex jest rząd, więc możesz go usunąć. Możesz ustawić stałą szerokość .inflexible podobną do tej flex: 0 0 100px;. I dla .flexible możesz po prostu użyć flex: 1 i zajmie resztę wolnej szerokości.

.flex-container { 
 
    display: flex; 
 
    width: 500px; 
 
    background-color: green; 
 
} 
 
.flex-item { 
 
    margin: 20px 0; 
 
} 
 
.inflexible { 
 
    flex: 0 0 100px; 
 
    background-color: red; 
 
} 
 
.flexible { 
 
    flex: 1; 
 
    background-color: blue; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item inflexible"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, cupiditate earum quos! Laborum quibusdam dolor temporibus corporis 
 
    </div> 
 
    <div class="flex-item flexible"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi sed ab voluptatum obcaecati repudiandae, quia architecto ipsa deserunt recusandae dolorum harum, aperiam sint, molestias iure voluptatem doloremque. In, rem. 
 
    </div> 
 
</div>

Answer 5

W http://www.w3schools.com/cssref/css3_pr_flex-basis.asp mówi o flex-basis: auto następujące:

długość jest równa długości elastycznego elementu. Jeśli element ma długość określoną długość będzie zgodnie z jego treścią

flex-basis to trzecia nieruchomość ustawiony przez skrót flex nieruchomości.

Jeśli ustawisz wartość na auto, maksymalna szerokość div div (w zależności od zawartości) będzie równa szerokości kontenera display: flex.