CSS3 flexbox dostosowuje wysokość elementów wyrównanych w pionie

Question

Oct 02, 2013, 04:08 PM

CSS3 flexbox dostosowuje wysokość elementów wyrównanych w pionie

Czy można to zrobić.item-1 wysokość elastyczna i regulowana.item-2 wysokość? Na przykład:

Jeśli.item-1 wysokość jest10% następnie.item-2 wysokość jest90%Jeśli.item-1 wysokość jest11% następnie.item-2 wysokość jest89%

Więc w zależności od zawartości.item-1 powinniśmy zmienić jego rozmiar.

HTML

<div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
</div>

CSS

html,
body,
.container {
    height: 100%;
}
.container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}
.item {
    background: #eee;
    margin: 1px;
}
.item-1 {
  -webkit-box-flex: 3 3 100%;
  -moz-box-flex: 3 3 100%;
  -webkit-flex: 3 3 100%;
  -ms-flex: 3 3 100%;
  flex: 3 3 100%;
}
.item-2 {
  -webkit-box-flex: 1 1 100%;
  -moz-box-flex: 1 1 100%;
  -webkit-flex: 1 1 100%;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
}

JSFiddle:http://jsfiddle.net/vpetrychuk/SYZtg/2