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

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

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.