Shrink & Grow von flex-items in einem "Preistabellen"-BSP - wie die Flex-item-Breite bestimmen?!

[Ansophie]

Hallo.
Ich versuche gerade shrink und grow anhand eines pens (original https://codepen.io/AllThingsSmitty/pen/mwEVZX) zu verstehen.

Das ungewöhnliche daran: u.a. wird nicht direkt mit flex-direction oder justify-contentgearbeitet aber mit width: 0;.

Jedenfalls ist mir das Grundgerüst klar, und mir ist auch halbwegs klar, wie ich sozusagen die Länge der einzelnen Items auf gleich bekomme (border-bottom weg, border um flex-item = ist vielleicht nicht die eleganteste Art).

Meine Frage:
In der ersten Zeile (class="package-top") fließt der Text raus. besagtes package-top bräuchte also mehr width oder muss schrumpfen, dass es trotzdem lesbar bleibt, probiert habe ich das, aber das hat gar nicht geklappt.

Was habe ich übersehen?

Spoiler: html

<div class="flex-container">
  <div class="flex-item">
    <ul class="package">
      <li class="package-top">BASICS</li>
      <li class="gray">$ 20/month</li>
      <li>20GB Storage</li>
      <li>100 Domains</li>
      <li>1TB Bandwidth</li>
      <li>1000 Email Boxes</li>
    </ul>
  </div>
  <div class="flex-item">
    <ul class="package">
      <li class="package-top highlight">Very Medium Paket</li> 
      <li class="gray">$ 30/month</li>
      <li>100GB Storage</li>
      <li>500 Domains</li>
      <li>2TB Bandwidth</li>
      <li>1000 Email Boxes</li>
    </ul>
  </div>
  <div class="flex-item">
   <ul class="package">
      <li class="package-top">XXXXLLARGE (Long Text)</li>
      <li class="gray">$ 60/month</li>
      <li>250GB Storage</li>
      <li>500 Domains</li>
      <li>5TB Bandwidth</li>
      <li>1000 Email Boxes</li>
    </ul>
  </div>
  <div class="flex-item">
   <ul class="package">
      <li class="package-top">SUPERLARGELARGE PAKET</li>
      <li class="gray">$ 60/month</li>
      <li>250GB Storage</li>
      <li>500 Domains</li>
      <li>5TB Bandwidth</li>
      <li>1000 Email Boxes</li>
    </ul>
  </div>
</div>

Spoiler: Css

* {
  box-sizing: border-box;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen-Sans,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    sans-serif;
  margin: 0;
  padding: 0;
}

.flex-container {
  display: flex;
  padding: 1rem;
}

.flex-item {
  flex: 1;
  width: 0;
 
}

.flex-item:not(:last-child) {
  margin-right: 1rem;
}

.package {
  border: 1px solid #eee;
  list-style-type: none;
  margin: 0;
  padding: 0;
  transition: 0.25s;
}

.package:hover {
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
  transform: scale(1.025);
}

.package .package-top {
  background-color: #333;
  color: #fff;
  font-size: 1.5em;
}

.package .highlight {
  background-color: #29b6f6;
}

.package li {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 1.2em;
  text-align: center;
}

.package .gray {
  background-color: #eee;
  font-size: 1.25em;
}


@media only screen and (max-width: 600px) {
  .flex-container {
    flex-wrap: wrap;
  }

  .flex-item {
    flex: 0 0 100%;
    margin-bottom: 1rem;
    width: 100%;
  }

  .package:hover {
    box-shadow: none;
    transform: none;
  }

 
}

lg, ansophie

 

[Ansophie]

Danke für deinen Input!

zeilenweise zusammenfassen.

ist ein guter Tipp - mit einer neuen Struktur (ohne <li>-Elemente und im "klassischem flex-stil") klappt ein einheitliches Raster leichter - und das "shrink" lässt sich so umgehen. :)

lg