1

I have a flexbox issue I can't solve. In Chrome it looks like that: enter image description here In Safari (and on the android mobile) like that: enter image description here

I try to find a solution that the green div always scales in the height. In other words it should look like on Chrome in every browser.

Here's the Fiddle: https://jsfiddle.net/9v0Lnnaa/

HTML

<div class="flexContainer">
  <div class="flexItem">
    <div class="flexItemContent">
      bla
    </div>
  </div>
  <div class="flexItem">
    <div class="flexItemContent">
      bla
      <br /> bla
      <br /> bla
      <br /> bla
    </div>
  </div>
  <div class="flexItem">
    <div class="flexItemContent">
      bla
      <br /> bla
      <br /> bla
      <br /> bla
    </div>
  </div>
  <div class="flexItem">
    <div class="flexItemContent">
      bla
      <br /> bla
      <br /> bla
      <br /> la
      <br /> bla
      <br /> bla
      <br /> bla
    </div>
  </div>
</div>

CSS

.flexContainer {
  display: flex;
  flex-wrap: wrap;
}

.flexItem {
  width: 300px;
  border: 1px solid black;
  margin: 5px;
}

.flexItemContent {
  background-color: green;
  height: 100%;
}
user1879408
  • 1,948
  • 3
  • 17
  • 27
  • Depending on the versions of Safari / Android, you may need to add prefixes: http://stackoverflow.com/a/35137869/3597276 – Michael Benjamin Jun 21 '16 at 13:12
  • "...Safari 9 supports the current flexbox spec without prefixes" – user1879408 Jun 22 '16 at 08:58
  • So if the browser version is current, it must be the use of `height: 100%` on the child, without a specified `height` on the parent. Some browsers still adhere to the traditional interpretation of the spec in this regard: http://stackoverflow.com/a/31728799/3597276 – Michael Benjamin Jun 22 '16 at 12:44
  • This may also shed some light: http://stackoverflow.com/a/35537510/3597276 – Michael Benjamin Jun 22 '16 at 12:45
  • Thanks for the links. I read through the posts, but I still don't make it to change my fiddle so it works. The problem: The height should not be referenced to the body, neither to a fixed size. It should adjust to the content. – user1879408 Jun 22 '16 at 13:52
  • See the two alternative solutions at the end of my last link reference. – Michael Benjamin Jun 22 '16 at 14:26
  • Sorry, I really don't get it. I tried that stuff, but it does not work. I really appreciate if you change the fiddle so it works. – user1879408 Jun 27 '16 at 08:21

0 Answers0