iPad Safari/Chrome flexbox item height from sibling

Question

I'm trying to set two items inside a flexbox grid row to equal height.
In the following example the item on the left has a child with height set to 100%. The content on the right should also increase the height for the item on the left.

.grid {
  padding-right: 2px;
  padding-left: 2px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.row {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-right: -2px;
  margin-left: -2px;
}
[class^="col-xs"],
[class*=" col-xs"],
[class^="col-xs-offset"],
[class*=" col-xs-offset"] {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  padding: 2px;
}
.col-xs-4 {
  -webkit-flex-basis: 33.33333333%;
      -ms-flex-preferred-size: 33.33333333%;
          flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}
.col-xs-8 {
  -webkit-flex-basis: 66.66666667%;
      -ms-flex-preferred-size: 66.66666667%;
          flex-basis: 66.66666667%;
  max-width: 66.66666667%;
}

.background {
  height: 100%;
  background-color: #f00; 
}

<div class="grid full">
  <div class="row">
    <div class="col-xs-8">
      <div class="background">
      
      </div>
    </div>
    <div class="col-xs-4">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

This is working e.g. in Chrome on iMac with OSX 10.10 but not on iPad mini Chrome (Version 55.0) or Safari (Version 601.1).

It seems that Safari/Chrome can't determine the height of div.background because the parent items doesn't have a defined height. Any suggestions on solving this? Preferably without JS.

iPad Safari/Chrome flexbox item height from sibling

0 Answers0