Warum nicht einfach flex-Elemente verkleinern Vergangenheit Größe des Inhalts?

Ich habe 4 flexbox-Spalten und alles funktioniert Prima, sobald ich aber einen text hinzufügen, um eine Spalte und legen Sie es auf eine große Schriftgröße, macht auch die Spalte breiter als es sein sollte, durch die flex-Eigenschaft.

Habe ich versucht zu verwenden word-break: break-word - und es hat geholfen, aber immer noch, wenn ich die Größe der Spalte auf einen sehr kleinen Breite, die Buchstaben in der text umbrochen (ein Buchstabe pro Zeile) und noch die Spalte nicht kleiner Breite als ein Brief-Größe.

Sehen Sie diese video
(am Anfang, in der ersten Spalte ist der kleinste, aber wenn ich verkleinert das Fenster, es ist die breiteste Spalte. Ich möchte einfach nur Respekt, flex-Einstellungen immer; flex-Größen 1 : 3 : 4 : 4)

Ich wissen, Einstellung schriftart,-Größe und-Spalte Polsterung an kleineren helfen... aber gibt es irgendeine andere Lösung?

Kann ich nicht verwenden overflow-x: hidden.

JSFiddle

CSS:

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

HTML:

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

InformationsquelleAutor tomas657 | 2016-03-27
  1. 373

    Die Automatische Minimum-Größe der Flex-Elemente

    Du bist der Begegnung mit einem flexbox-Standard-Einstellung.

    Ein flex-Element nicht kleiner als die Größe der Inhalte entlang der Hauptachse.

    Die defaults sind...

    • min-width: auto
    • min-height: auto

    ...für die flex-items in Zeilen-Richtung und Spalten-Richtung, beziehungsweise.

    Sie können diese Standardwerte überschreiben, indem Sie die Einstellung " flex-Elemente:

    • min-width: 0
    • min-height: 0
    • overflow: hidden (oder jeder andere Wert, außer visible)

    Flexbox-Spezifikation

    4.5. Automatische Minimum-Größe von Flex
    Gegenstände

    Einen angemessenen Standard-Mindest-Größe für die flex-items, diese
    Spezifikation führt eine neue auto Wert als der ursprüngliche Wert
    die min-width und min-height definierten Eigenschaften in CSS 2.1.

    Mit Bezug auf die auto Wert...

    Auf einem flex-Element, dessen overflow ist visible in der Hauptachse, wenn angegeben auf der flex-Element ist der main-Achse min-size-Eigenschaft gibt ein automatische minimum-Größe. Es anderenfalls berechnet, um 0.

    In anderen Worten:

    • Die min-width: auto und min-height: auto Standardwerte gelten nur, wenn overflow ist visible.
    • Wenn die overflow Wert ist nicht visible, wird der Wert des min-size-Eigenschaft ist 0.
    • Daher overflow: hidden kann ein Ersatz für min-width: 0 und min-height: 0.

    und...

    Sie angewendet haben, wird min-width: 0 und das Element noch nicht verkleinern?

    Verschachtelte Flex-Container

    Wenn man sich mit flex-Elemente auf mehreren Ebenen von der HTML-Struktur, kann es notwendig sein, um die Standardeinstellung zu überschreiben min-width: auto /min-height: auto auf Elemente auf höheren Ebenen.

    Grundsätzlich eine höhere flex-Element mit min-width: auto können verhindern, dass Schrumpfung auf Elemente verschachtelt unten mit min-width: 0.

    Beispiele:

    Browser-Rendering-Notes

    • Chrome vs. Firefox /Edge

      Seit mindestens 2017, es scheint, dass Chrome ist entweder (1) Rückkehr zu den min-width: 0 /min-height: 0 Standardeinstellungen, oder (2) automatisch anhand der 0 Vorgaben in bestimmten Situationen basierend auf einem mystery-Algorithmus. (Dies könnte sein, was Sie nennen eine intervention.) Als ein Ergebnis, viele Menschen sehen Ihr layout (vor allem gewünschte scrollbars) wie erwartet funktioniert in Chrome, aber nicht im Firefox /Edge. Dieses Problem wird im detail behandelt hier: flex-shrink Diskrepanz zwischen Firefox und Chrome

    • IE11

      Wie bereits in der Spezifikation, die auto Wert für die min-width und min-height Eigenschaften ist "neue". Dies bedeutet, dass bei einigen Browsern kann es noch leisten ein 0 Wert standardmäßig, weil Sie umgesetzt flex-layout, bevor der Wert aktualisiert wurde und weil 0 ist der anfängliche Wert für min-width und min-height im CSS 2.1. Ein solcher browser ist IE11. Anderen Browser aktualisiert, um die neueren auto Wert in dem definierten flexbox-spec.

    Überarbeitete Demo

    CSS:

    .container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

    HTML:

    <div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

    jsFiddle

    • Ich hatte ein <fieldset> übergeordnete Begriffe viel weiter oben in den dom und das verursachte das gleiche Problem. Einstellung der min-width auf 0 fixiert.
    • Irgendwelche Gedanken über diese ein : stackoverflow.com/a/36247448/8620333, .. ich fand es hat zu tun mit min-width aber nicht wirklich sicher über alle details.
    • Sieht aus wie Chrome geändert, das Verhalten im v73, um nicht zu schrumpfen, kleiner als der Inhalt.
    • chromestatus.com/feature/6736527476391936
    • Gleiche Update gearbeitet, mit min-height: 0; . Ich musste versuchen Sie, diese Einstellung für mehrere höhere Elemente in den Baum.
    • Verloren zwei Stunden, um herauszufinden, warum overflow: hidden verändert die Höhe des Elements. Danke Mann.

    InformationsquelleAutor Michael_B
Schreibe einen Kommentar