CSS max-width width:auto nie działa

Question

Cześć.

Sprawa ma się następująco. Mam div- 'Container' który jest automatycznie skalowany i w tym divie siedzą mniejsze bloczki które swoją wartość width mają skalować automatycznie względem nadrzędnego diva. Jednak tego nie robią.

Szukam od wczoraj testuje, ale nic nie przynosi efektu, czy znajdzie się ktoś kto mi wytłumaczy jak to działa i co robię źle ?
 

http://www.cssdesk.com/Fbcab

Comments

Pozwolę sobie mimo zamknięcia dodać komentarz. Jeżeli mają się skalować względem rodzica i jest ich cztery to myszą mieć 1/4 szerokości rodzica czyli 25%. Żeby do tej szerokości nie liczył się padding i border można użyć funkcji calc() lub zastosować box-sizing ustawiony na border-box. Jeszcze tylko wycentrowanie ich zawartości text-align i powinno działać.

Answer 1

Myślę, że nie możesz operować min-width i max-width, kiedy nadałeś divom float: left;.

Polecam zastosować grid, dodając do kontenera:

.Summary {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Lub wyrzucić z .SummaryTile właściwość foat i ustawić ich width na calc(25% - padding+margin). Ewentualnie, jak zostało już zasugerowane, użyć flexboxa.

Answer 2

Nie lepiej napisać to na flexboxie? Wszystko ładniej, szybciej i lepiej.