height:100% works in Chrome but not in Safari

Question

I have made a splitter which works perfectly in Chrome.

However, it does not work in Safari. But if we change the height in .handle-inner from 100% to 400px, we will observe that the splitter (from the top down to 400px) becomes draggable. That means it is height:100% which did not work in Safari.

Does anyone know how to amend the code to make the splitter work in both Chrome and Safari?

Edit 1:

I made a more complex example which has similar structure as my real program. In my real program, I do not fix the height as 500px, I use the whole screen, and don't want to exceed it. Here is the splitter which works perfectly in Chrome, but height:100% does not work in Safari.

Here is the version with height: 100vh. We could see the height is too much in both Chrome and Safari. However, we do NOT know how to set max-height.

You are required to give an example of the markup showing the problem here, not a third party web site that can change or disappear tomorrow helping no one. http://stackoverflow.com/help/mcve — Rob, Apr 15 '17 at 03:59

Michael Benjamin · Accepted Answer · 2017-08-22T13:28:24.260

Your flex container (.flex-box) has a defined height of 500px.

Your splitter (.handle-inner) has a defined height of 100%.

However, .handle, which exists between them, does not have a defined height. Safari sees this as a missing link, which it considers a violation of the spec, which essentially says:

The parent of an element with a percentage height must have a defined height and it must be with the height property. Otherwise, the element with a percentage height must default to height: auto (content height).

Therefore, you need to add height: 100% to .handle.

Also, in your body element, you not only have your .flex-box element, but you also have a nav element with height: 250px. Depending on how a browser handles the overflow (250px + 100%), this may cause your splitter element to disappear off-screen, which is happening in Safari.

To avoid that problem, make these adjustments to your code:

 * { box-sizing: border-box; }   /* include borders and padding in width
                                    and height calculations */

 .flex-box { height: calc(100% - 250px); } /* compensate for nav height */

revised demo

Also, being that body is a column-direction flex container, you can also use flex properties (such as flex: 1 on .flex-box) to consume remaining space. You may not even need percentage heights. See my answer here for details.

revised demo

Great, it works... Besides, if we add `margin-right: -5px` to `.handle-inner`, it will make the splitter easier to drag. Additionally, in my real program, `height: 100%` in `body` is better than `height: 100vh` (which makes the height of the whole thing longer than my screen). Thank you... — SoftTimur, Apr 15 '17 at 04:41

Jason Y · Answer 2 · 2017-04-13T23:01:42.137

3

Try changing your height in .handle-inner from 100% to 100vh. Set it up like this with a fall back:

.handle-inner {
  width: 10px;
  margin-left: -5px;
  height: 100%;
  height: 100vh;
}

Edit: Replace your CSS with this

.flex-box {
  display: flex;
  width: 100%;
  height: 500px;
}
.flex-box .col {
  border: 1px solid grey;
  flex: 1;
}
.handle {
  width: 1px;
  text-align: center;
  background: grey;
  transition: all ease-in 0.1s;
}
.draggable {
  background: grey;
}

.handle {
  width: 0.0000001px;
  transition: all ease-in 0.1s;
  z-index: 999;
  background: grey;
}

.handle-inner {
  width: 10px;
  margin-left: -5px;
  height: 100%;
  height: 100vh;
}

If you are experiencing overflow, like you stated. Try a height/max-height property.

edited Apr 13 '17 at 23:01

answered Apr 13 '17 at 03:20

Jason Y

831
5
10

after adding `height: 100vh`, you will see even the splitter below out of the box becomes draggable... it is too long... – SoftTimur Apr 13 '17 at 11:35
I see you removed your Plunker link. I am not experiencing that. I have the link open in both Chrome and Safari. With the vh unit on the height, they are both performing exactly the same – Jason Y Apr 13 '17 at 12:46
I did NOT removed my plunker link, and the link you put does not contain `height: 100vh`. – SoftTimur Apr 13 '17 at 13:39
I see that now. My mistake. I was looking for a run code snippet button. See my edit above. – Jason Y Apr 13 '17 at 20:50
Can you make a plunker with your code, I have tested, and it did not work as I stated... – SoftTimur Apr 13 '17 at 20:57
I have tested this in both Chrome and Safari http://plnkr.co/edit/2768iyLhtAfsQkRHN7v0 – Jason Y Apr 13 '17 at 21:32
With your plunker, as I said, "the splitter below out of the box becomes draggable... it is too long..." – SoftTimur Apr 13 '17 at 21:34
A screen shot would be helpful. Which version of Safari are you running? – Jason Y Apr 13 '17 at 22:38
Screenshots don't catch the shape of the cursor. I use `Chrome 57.0.2987.133 (64-bit)` and `Safari Version 10.0.3 (12602.4.8)`. Just put your cursor over the splitter, then move down, down and out of the box, you will see it is still draggable over the hidden handle-inner... – SoftTimur Apr 13 '17 at 22:43
Alright, that last bit of additional information helped. I've added a max-height prop after the 100vh prop. This is now consistent between Chrome and Safari. – Jason Y Apr 13 '17 at 22:50
Thanks for this. But in some cases, we don't want to set a fixed value as `max-height`. I make a more complex (and real) example. Please see my edit. – SoftTimur Apr 14 '17 at 00:50
2

Well, i agree that your fix works for my initial request. But I have a feeling that `height: 100vh; max-height: 500px` is a hack. I would prefer to understand where is the bug and have a more thorough solution. Let us wait a little bit, and see if there are other propositions, I may come back to your answer later... – SoftTimur Apr 14 '17 at 01:17
I added `Edit 1`, but I didn't change my original post. I can wait a little bit, and don't have to accept an answer immediately. – SoftTimur Apr 14 '17 at 02:37

height:100% works in Chrome but not in Safari

2 Answers2

Linked