Verhindern, dass ein flex-Elemente Höhe von erweitert, um mit anderen flex-Elemente

Habe ich zwei Elemente in einem container, die side-by-side mit flex-box. Auf dem zweiten element (.flexbox-2), ich bin festlegen es ist die Höhe in der CSS. Doch dann das erste element (.flexbox-1) entspricht die Höhe der .flexbox-2. Wie würde ich aufhören .flexbox-1 passend die Höhe der .flexbox-2, und stattdessen nur die behalten Ihre Natürliche Höhe?

Hier ist was ich bisher (auch als jsFiddle)

CSS:

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

HTML:

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

InformationsquelleAutor Tom Oakley | 2014-12-20
Schreibe einen Kommentar