2

Safari 10.0 renders this example differently than Firefox, Chrome, Microsoft Edge or Microsoft Explorer: the red div fills the whole height in all of these browser and it does not in Safari. The problem seems to be with the vertical text - how to fix it?

.outer {
  display: flex;
  height: 100px;
  background: green;
}

.inner {
  display: block;
  background: blue;
}

.test {
  display: block;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  background: red;
}
<div class="outer">
  <div class="test">
    One
  </div>
  <div class="inner">
    Two
  </div>
</div>
gl9100
  • 21
  • 3
  • whats the exact behaviour on Safari ? the blue div sits at the bottom ? – Nikhil Nanjappa Oct 27 '16 at 13:49
  • the blue div stretches from top to bottom (as as it should) but the red div only takes a part of vertical space big enough to fit the text "One" – gl9100 Oct 27 '16 at 13:51
  • and does it stretch completely when you remove the vertical text behaviour ? – Nikhil Nanjappa Oct 27 '16 at 13:54
  • yes, after removing vertical text modifiers both divs "test" and "inner" stretch from top to bottom of the "outer" div – gl9100 Oct 27 '16 at 13:56
  • Can you try `align-items: stretch` on your container(.outer) – Nikhil Nanjappa Oct 27 '16 at 14:03
  • Adding align-items: stretch changes nothing. Actually I noticed that the original example is rendered one way on Firefox and another way on Chrome/Edge but this difference is not a problem in my case. – gl9100 Oct 27 '16 at 14:07
  • This accepted answer might give you an idea - http://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent – Nikhil Nanjappa Oct 27 '16 at 14:14
  • My example actually follows solution 4 from the posted question: "use flexbox all the way". I cannot use absolute positioning in the real problem this little example illustrates. I would really like to fix the example somehow. – gl9100 Oct 27 '16 at 15:37

0 Answers0