3 elementy każdy na 1/3 szerokości

Witam , potrzebuję wskazówki jak zapisać w CSS, aby 3 elementy zajmowały równo po 1/3 szerokości.
Wpisując wartość 33% pozostanie 1%.
Zatem co zapisać w kodzie , aby łącznie było wykorzystane 100% szerokości i nie pozostał żaden wolny piskel.

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-grow

Dając wszystkim divom style="flex-grow: 1" masz równe części, zmieniając wartość możesz osiągać różne proporcje, spróbuj ;)

czysteskarpety napisał(a):

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-grow

Dając wszystkim divom style="flex-grow: 1" masz równe części, zmieniając wartość możesz osiągać różne proporcje, spróbuj ;)

jak dokładnie tego użyć ? Po prostu dopisać to polecenie do każdego z tych 3 div'ów - zmieniać wartości i obserwować co się dzieje?

viGor napisał(a):

jak dokładnie tego użyć ? Po prostu dopisać to polecenie do każdego z tych 3 div'ów - zmieniać wartości i obserwować co się dzieje?

html:

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

css:

.container {
  width: 100%;
  display: flex;
}
.child {
  flex-grow: 1;
}

https://jsfiddle.net/kvbsx2mc/

Można też to zrobić za pomocą css grid. Jednak nie działa to w Internet Explorerze (niech ginie). Ale daje trochę większe możliwości i przynajmniej dla mnie - jest bardziej przejrzyste. Nigdy nie mogłem sprawić by flex-grow flex-basis flex-shrink działały tak jak chce. A z gridem wszystko jest proste.

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

https://jsfiddle.net/6z7m2rxt/