CSS flex-wrap: wrap Link verteilt sich auch auf 2 Zeilen und wird gestreckt

[Segelflugpilot]

Moin moin,
ich habe da ein ziemlich ärgerliches Problem. Ich einige Links hintereinander und diese sollen über flex-wrap: wrap falls sie nicht mehr passen in die nächste Zeile rutschen. Manche Links sind aber angezeigt so lang, dass diese auch in die eine neue Zeile verfrachtet werden, was für mich kein Problem ist, jedoch wird der Text dann sehr lang gestreckt. Könnt ihr mir sagen, wie ich das verhindern kann?
Ich bin leider noch relativ neu in CSS

Vielen Dank!

 

[Bagbag]

Am besten gibst du uns ein Beispiel (kein Bild, sondern HTML + CSS).

 

[Segelflugpilot]

Wenn ich jetzt mehre gebiet boxen mit Inhalt habe, wird der Text auf 2 Zeilen gestreckt, wenn die Breite nicht aussreicht

HTML
<div id="außenbox">
<div class="gebiet">
  <div id="arbe">
    <div class="arbe-content">
      <div class="header">
        <h2>LAAAAAAAAnger TEXXXXXXTTTTT</h2></div>
      <div class="copy">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <a href="#">Schließen</a> </div>
    </div>
    <div class="overlay"></div>
  </div>
  <a href="#arbe" class="arbe">LAAAAAAAAnger TEXXXXXXTTTTT</a>
</div>


<!-- Hier muss irgendwann die außenbox geschlossen werden nach mehreren Beispielen-->
</div>


CSS
#außenbox { display: flex; justify-content:space-around; flex-wrap: wrap;}
.gebiet {flex: 0 1 15%; margin: 12px}

CSS Modal
#arbe {
  left: 50%;
  margin: -250px 0 0 -32%;
  opacity: 0;
  position: absolute;
  top: -50%;
  visibility: hidden;
  width: 65%;
  box-shadow: 0 3px 7px rgba(0,0,0,.25);
  box-sizing: border-box;
  transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out
}

#arbe:target {
  opacity: 1;
  top: 50%;
  visibility: visible
}

/* Modal styles */
#arbe .header, #arbe .footer {
  border-bottom: 1px solid #e60000;
  border-radius: 5px 5px 0 0
}

#arbe .footer {
  border: none;
  border-top: 1px solid #e7e7e7;
  border-radius: 0 0 5px 5px
}

#arbe h2 {
  margin: 0;
  color: #fff
}

#arbe .btn { float: right }

/*Textfenster */
#arbe .copy, #arbe .header, #arbe .footer {
  padding: 10px;
  color: #454A52;
}

.arbe-content {
  background: #26292D;
  position: relative;
  z-index: 20;
  border-radius: 5px;
  color: #fff
}

#arbe .copy, { background: white}

#arbe .overlay,{
  background-color: #000;
  background: rgba(0,0,0,.8);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10
}

 

[Bagbag]

Also bei mir geht der Text über mehere Zeilen erst, sobald der Body zu klein ist (da du da ja fix auf 15% gestellt hast): https://jsfiddle.net/5pbg7xyk/1/

 

[Segelflugpilot]

Ja korrekt, ich wollte mehre Sachen nebeneinander anzeigen.
Hier einfach mal das Beispiel, da es so deutlich wird. Den Link würde ich aber gleich wieder entfernen.
Bitte nicht steinigen, ist mein erstes richtigeres Werk

 

[Bagbag]

Dein Problem ist die relative Breite von 15%. Du darfst das nicht vom Container, sondern musst es vom Content abhängig machen.

Ich gebe dir ein Tipp: nimm kein Flexbox, sondern CSS-Grid, dann hast du passende Größen und kannst alle gleich groß sein lassen. Die Kurzen Texte sehen aktuell jedenfalls fehlplaziert aus.
https://css-tricks.com/snippets/css/complete-guide-grid/

 

[Segelflugpilot]

Das liegt daran, dass ich gerade den Wert noch von 15 auf 18% angepasst habe. Wenn du deine Auflösung verkleinerst, also über das entwickler tool, wird es sichtbar

 

[Bagbag]

Ja, hab den Text schon entfernt Es sah falsch aus, sobald ich das Fenster kleiner gemacht habe.

 

[Segelflugpilot]

Rein hypothetisch, wenn ich ein DAU wäre, wie mache ich das

 

[Bagbag]

#außenbox {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, minmax(max-content, 28rem));
    grid-gap: 1rem;
}

.rechtsgebiet kann ganz weg (auch das margin).

 

[Segelflugpilot]

oh mein gott, so leicht ich könnte heulen. Ich habe das seit Stunden versucht zu lösen. DANKE!!!!
Du weißt nicht zufällig wie ich die Überbreite des akkordeon (oben Menü, bzw. Bild) weg bekomme oder? Denn irgendwie ist das zu breit geraten und man muss immer zur Seite scrollen

 

[Bagbag]

Das div mit der Klasse section-logo (also das mit dem Portrait-Bild), braucht width: 100% statt 100vw, da vw den vertikalen Scrollbalken mit zählt.

Nachtrag: Bei dem Header oben wäre flex, statt einer fixen relativen Größe angebracht, da auf dem Desktop und somit ohne Menü-Button oben rechts eine Lücke ist.

 

[Segelflugpilot]

oh verdammt, wieder was gelernt. Jetzt muss ich nur wieder das Menü fixen
ätzend, löst du eins, hast du das nächste auf. Ich danke dir von ganzem Herzen!

btw. wie findest du grundsätzlich die Seite?

 

[Bagbag]

Technischtechnisch oder Layout- / Designtechnisch?

 

[Segelflugpilot]

Mir ist jede Kritik willkommen.
Wenn du mich für eine Sache lobst, bin ich happy als Anfänger

 

[Bagbag]

Erinnere mich da morgen nochmal dran (PN), ich muss jetzt schlafen gehen. Technisch kann ich da durchaus etwas an Kritik raus werfen

 

[Segelflugpilot]

oh vielen vielen Dank.
Gute Nacht und danke nochmal!

 

[Segelflugpilot]

Ich könnte bei einer Sache nochmal Hilfe gebrauchen
https://notar-verden.de/
Das Hamburger Menü schließt sich nicht mehr ganz bei kleinen Auflösungen wenn ich das Menü aufmache, auf eine Menüpunkte gehe, aber auf keinen Link klicke, sondern nur dann auf das X zum schließen des Menüs.

 

[Bagbag]

Bin grad nur am Smartphone, aber da funktioniert es. Hast du es mittlerweile behoben?

PS: Die Animationen sind viel, viel zu lang.

 

[Darrel]

Wollte nur kurz bestätigen, dass das Menü nicht mehr ganz schließt, wenn man ein Untermenü geöffnet hat. Außerdem lassen sich Untermenüs nicht schließen.

Es liegt meiner Meinung nach daran, dass die Höhe des mobilen Menüs an die Höhe des .section-logo-Bereichs gekoppelt ist und der Inhalt des Menüs bei geöffnetem Untermenü die vorgegebene Höhe übersteigt.

Ich meine diese vorgegebenen Höhen:

@media (min-width: 400px)
.section-logo {
    height: 25rem;
}

@media (min-width: 320px)
.section-logo {   
    height: 20rem; 
}

Die Antwort ist mit Vorsicht zu genießen, da ich wirklich nur kurz drüber geschaut habe.