Jak zabezpieczyć elementy CSS mniejsze niż ich zawartość?

Question

Próbuję użyć elastycznego układ z dwoma elastycznymi elementami:

• Flex pozycja 1 jest wypełnione w czasie wykonywania z dynamicznej zawartości (powinna być tak duża, jak jego wewnętrznej treści)
• poz Flex 2 powinny się pozostałą przestrzeń

Jakkolwiek Firefox (i chrom) ignorują wewnętrzną szerokość elementów podrzędnych, który prowadzi do elementów zachodzących na siebie (tj zgodnie z oczekiwaniami) (Fiddle)

<div style="display: flex;"> 
    <!-- As suggested at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes --> 
    <div style="min-width: auto"> 
     <div style="width: 200px; background-color: green;">Dynamic Content</div> 
    </div> 
    <div style="flex-grow: 1; border: 1px solid #888;"> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div> 
</div> 

Szerokość 200 pikseli to tylko przykład, nie znam dokładnej szerokości w czasie wykonywania.

Na Developer Mozilla Znalazłem również

Aby zapewnić rozsądny domyślny rozmiar minumum dla Flex elementów, użyj min-width: auto i/lub min-height: auto. W przypadku elementów elastycznych wartość atrybutu auto oblicza minimalną szerokość/wysokość elementu tak, aby była nie mniejsza niż szerokość/wysokość jego zawartości, gwarantując, że element jest renderowany wystarczająco duży, aby pomieścić zawartość. Zobacz min-width i min-height, aby uzyskać więcej szczegółów.

Eksperymentowałem z różnymi wartościami, ale wynik był taki sam.

Czy jest to zgodne z projektem lub w jaki sposób mogę zapobiec zmniejszeniu rozmiarów skrzynek binarnych css niż ich zawartości?

EDYCJA: Wygląda na to, że teraz jest poprawnie zaimplementowana w przeglądarce Firefox/Chrome.

Answer 1

prostu zignorować Flex i użyj tego:

<div style="width:100%;"> 
<!-- As suggested at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes --> 
<div style="min-width: auto"> 
    <div style="width: 200px; background-color: green;">Dynamic Content</div> 
</div> 
<div style="flex-grow: 1; border: 1px solid #888;"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
</div> 

kiedy ustawić szerokość do 100%, następna pozycja będzie pod pierwszą. ponieważ użyliśmy innego elementu div do wewnętrznej zawartości, będą one zajmować niezbędną przestrzeń ...

Answer 2

Jeśli obie kolumny są ważne, możesz użyć max-width, aby zwiększyć/zmniejszyć szerokość.

Working Demo

Kod

<div style="display: flex; width:100%;"> 
    <div style="max-width: 50%"> 
     <div style="background-color: green;">Dynamic Content</div> 
    </div> 
    <div style="border: 1px solid #888; max-width: 50%;"> 
     Lorem ipsum dolor sit amet 
    </div> 
</div>