Pionowa lista elementów, w których każdy wiersz zmniejsza swoją szerokość, aby dopasować ją do wewnętrznej zawartości

Question

Chcę utworzyć pionową listę, w której każdy wiersz zmniejsza swoją szerokość, aby idealnie zawierał jej wewnętrzną zawartość (w porównaniu do domyślnego zachowania div w rozszerzaniu jej szerokości do napełnij pojemnik).

Chciałbym to zrobić z tylko jednym elementem jeden element dla każdego wiersza (bez dodatkowych elementów div do zawijania).

Poniższy kod robi dokładnie to, co chcę, ale nie działa w Safari (błąd?).

.container { 
 
    margin: 10px; 
 
    border: 2px solid #999; 
 
    padding: 5px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 300px 
 
} 
 
.row-item { 
 
    padding: 5px; 
 
    margin: 5px; 
 
    border: 1px solid green; 
 
    /* this will shrink the width to the inner content 
 
     in Chrome and Firefox, but not in Safari */ 
 
    margin-right: auto; 
 
}

<div class='container'> 
 
    <div class='row-item'>Item #1</div> 
 
    <div class='row-item'>Another Item...</div> 
 
    <div class='row-item'>Item No. 3</div> 
 
</div>

Tutaj jest codepen z powyższego kodu: http://codepen.io/anon/pen/woKYqx

wiem, że to jest trywialne, aby rozwiązać ten problem poprzez dodanie div owijania a następnie za pomocą display: inline-block na elemencie wewnętrznym (lub kilka innych podobnych rozwiązań).

Wygląda jednak na to, że powinno być możliwe rozwiązanie tego problemu bez dodawania dodatkowych elementów HTML. To dość prosty układ.

Czy istnieje sposób, aby zrobić to między przeglądarkami, używając pojedynczego elementu HTML dla każdego rzędu?

Answer 1

Używasz margin-right: auto, aby przesunąć element do końca w lewo, co również zmusza przedmiot do pobrania szerokości jego zawartości.

To jest dobra metoda, ale jak już zauważyłeś, nie działa w Safari.

Prostym rozwiązaniem jest użycie align-self: flex-start na flex przedmiotów:

.row-item { 
    padding: 5px; 
    margin: 5px; 
    border: 1px solid green; 
    align-self: flex-start; /* NEW */ 
    /* margin-right: auto; (can be kept or removed) */ 
} 

OR, wystarczy użyć align-items: flex-start na giętkim opakowaniu.

.container { 
    margin: 10px; 
    border: 2px solid #999; 
    padding: 5px; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; /* NEW */ 
    width: 300px 
} 

Answer 2

Podczas korzystania z display: flex należy również użyć prefiksu dostawcy. zbyt obsługi starszych wersji przeglądarek w razie wątpliwości sprawdzić się na caniuse.com

.container { 
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
display: -webkit-flex; /* NEW - Chrome */ 
display: -ms-flexbox; /* TWEENER - IE 10 */ 
display: flex; 
/* ETC */ 
} 

UWAGA: caniuse.com pisało o błędach zgłaszanych około schematu flexbox dziecięcych wysokość w safari.

Answer 3

Można usunąć wszystkie rzeczy i elastycznego korzystania float:left i clear:left na dzieci, a overflow-x: hidden na rodzica:

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