Wie Sie verhindern, dass ein flex-box wächst mit dem Inhalt

In den code und jsfiddle unten flexbox Proportionen verändert sich mit Inhalt. Ich bin Gefühl, das ich nicht verstehen den wahren Sinn des flexbox hier. Wenn wir geben flex-grow Eigenschaften für die Proportionen, die wir wünschen, ist, warum die Boxen wachsen mit Inhalt?

Bemerken, wenn dataDiv hat neue span-Inhalt in das Verhältnis gebrochen mit dem Inhalt. Sie können beobachten, wie es ist, die erwarteten Proportionen, wenn Sie löschen die span innen dataDiv. Warum geschieht dies?

https://jsfiddle.net/4shaz5oy/

CSS:

.container {
  display: flex;
  flex-flow: row wrap;
  height: 100vh;
}
.mapBox {
  flex: 2;
  background-color: red;
}
.controlBox {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: green;
}
.controlPanel {
  flex: 1;
  max-height: 33%;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}
.dataPanel {
  flex: 2;
  max-height: 66%;
  background-color: blue;
  padding: 5px;
}

HTML:

<div class="container">
  <div class="mapBox"></div>
  <div class="controlBox">
    <div class="controlPanel">
      <div class="buttonDiv"></div>
      <div class="buttonDiv"></div>
      <div class="buttonDiv"></div>
    </div>
    <div class="dataPanel">
      <div class="dataDiv">
        <span>yoyoyoyasdasdadsadasdasdasdasdasdasdasdadada</span>
      </div>
    </div>
  </div>
</div>

InformationsquelleAutor Ozum Safa | 2016-03-23
  1. 4

    Den flex-grow legt fest, wie die verbleibenden Raum verteilt werden sollten unter den flex-Elementen, nicht die Elemente selbst.

    Für Ihre Größe, die Sie verwenden flex-basis

    CSS:

    html, body {
  margin: 0;
}
.container {
    display: flex;
    flex-flow: row wrap;
    height: 100vh;
}

.mapBox {
    flex: 2;
    flex-basis: 66%;
    background-color: red;
}

.controlBox {
    flex: 1;
    flex-basis: 33%;
    display: flex;
    flex-direction:column;
    background-color:green;
}

.controlPanel {
    flex: 1;
    max-height: 33%;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}

.dataPanel {
    flex: 2;
    max-height: 66%;
    background-color: blue;
    padding: 5px;
}

    HTML:

    <div class="container">
  <div class="mapBox">

  </div>

  <div class="controlBox">
    <div class="controlPanel">
      <div class="buttonDiv">

      </div>
      <div class="buttonDiv">

      </div>
      <div class="buttonDiv">

      </div>
    </div>

    <div class="dataPanel">
      <div class="dataDiv">
        <span>yoyoyoy as da sd ad sa da sd as da sd as da sd as da sd ad ada</span>
      </div>
    </div>
  </div>
</div>

    Basierend auf Kommentare, hier ist ein Vereinfachtes Beispiel, wie Größe

    CSS:

    html, body{
  margin: 0;
}
.flex, .left, .right {
  display: flex;
}
.left, .right {
  flex: 1;
  flex-direction: column;
}
.left {
  background: red;
  flex-basis: 66.66%;
}
.right {
  flex-basis: 33.33%;
}
.item1 {
  background: yellow;
  overflow: auto;
  height: 33.33vh;
}
.item2 {
  background: lightblue;
}

    HTML:

    <div class="flex">
  <div class="left">
    Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 <br>
    Bla 0<br>
    Bla 0<br>
    Bla 0<br>
    Bla 0<br>

  </div>
  <div class="right">
    <div class="item1">
      Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 <br>
      Bla 1<br>
      Bla 1<br>
      Bla 1<br>
      Bla 1<br>

      Bla 1<br>
      Bla 1<br>
      Bla 1<br>
      Bla 1<br>
      Bla 1<br>

    </div>
    <div class="item2">
      Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 <br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>

      Bla 2<br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>

      Bla 2<br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>

    </div>
  </div>  
</div>

    • Basis löst das problem mit horizontal wachsenden, von dem ich wusste, es würde. Aber am Ende, wenn Sie Inhalte hinzufügen, in dataDiv, Höhen conrolPanel und dataPanel noch ändert. Ich denke, es ist das, was flex ist und es gibt keine Möglichkeit, das zu ändern. Wahrscheinlich nur meine Sicht auf ihn. Wenn ich will, fixe Höhe vielleicht sollte ich die absolute Positionierung statt flex für controlBox.
    • hat einige Schwächen, die ich gelöst habe viele Male mit einem absolut positionierten inneren div, eingestellt overflow: auto. Auf diese Weise wächst nicht senkrecht, sondern beginnen zu Blättern.
    • Aktualisiert meine Antwort mit einem neuen 2 -: nd Probe.
    • Funktioniert auch in safari. Es ist eine interessante Lösung, allerdings etwas ein hack ist. Ich markieren Sie es als beantwortet. Danke.
    • Vielen Dank, und ich gerade aktualisiert ... funktioniert in allen Browsern jetzt weniger hacky 🙂
    InformationsquelleAutor LGSon
  2. 3

    Wie es aussieht funktioniert alles wie erwartet, das problem ist es ist kein Platz unter yoyoyoyasdasdadsadasdasdasdasdasdasdasdadada Fokus das Feld, um zu wachsen.

    Wenn Sie .dataPanel {word-break: break-all;} sehen Sie die Unterschiede.

    InformationsquelleAutor Stickers
Schreibe einen Kommentar