0

Is it possible to make .item-1 height flexible and adjust .item-2 height? For example:

  • if .item-1 height is 10% then .item-2 height is 90%
  • if .item-1 height is 11% then .item-2 height is 89%

So depending on the content of the .item-1 we should resize it.

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

Vitalii Petrychuk
  • 14,035
  • 8
  • 51
  • 55
  • Related: http://stackoverflow.com/questions/14224732/in-what-circumstances-flex-shrink-is-applied-to-the-flex-elements-and-how-it-wor – cimmanon Oct 02 '13 at 17:24

1 Answers1

1

You can't do this with the 2009 Flexbox properties because there is nothing comparable to the flex-basis property (the box-flex property from the 2009 draft is not the same thing as the flex property from the modern draft, as it can only accept a single floating point value rather than 0-2 integers and 0-1 lengths).

http://codepen.io/cimmanon/pen/AGLge

html,
body,
.container {
  height: 100%;
}

.container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.item {
  background: #eee;
  margin: 1px;
}

.item-1 {
  -webkit-flex: 1 1 10%;
  -ms-flex: 1 1 10%;
  flex: 1 1 10%;
}

.item-2 {
  -webkit-flex: 1 1 90%;
  -ms-flex: 1 1 90%;
  flex: 1 1 90%;
}
cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • Thanks for your answer. It's sad that we cannot avoid percentages :( Could you suggest some workaround? – Vitalii Petrychuk Oct 02 '13 at 18:02
  • I do not want to hardcode `.item-1` height to `10%`. Its height should depend on the content inside it. And `.item-2` height should also be flexible `100% - .item-1 height`. – Vitalii Petrychuk Oct 02 '13 at 18:13
  • It *is* flexible. See the question I linked to above. The `flex-basis` property is simply the element's ideal size. It isn't the same thing as specifying `width`. – cimmanon Oct 02 '13 at 18:23