height:100% works in Chrome but not in Safari [duplicate]

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.

Answer 1

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

Answer 2

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.