Height: 100% works in Chrome but not Safari
I've created a delimiter that works fine in Chrome.
However, it doesn't work in Safari. But if we change the height in .handle-inner
from 100%
to 400px
, we can see that the splitter (from top to bottom to 400px
) becomes draggable. This means it doesn't work in Safari height:100%
.
Does anyone know how to change the code to make the splitter work in both Chrome and Safari?
Edit 1:
I made a more complex example that is similar to my real program. In my real program I am not fixing the height like 500px
, I am using the whole screen and do not want to exceed it. Here is a splitter that works fine in Chrome but height:100%
doesn't work in Safari.
Here is the version with height: 100vh
. We could see the height is too high in both Chrome and Safari. However, we don't know how to install max-height
.
source to share
The flex ( .flex-box
) container has a specific one height
of 500 pixels.
Your delimiter ( .handle-inner
) is height
100% specific .
However .handle
, what exists between them does not have a certain height. Safari considers this to be a missing link, which it considers a violation of the spec , which says:
The parent of an element with a percentage height must have a specific height and must be with a property height
. Otherwise, element with percentage height must be height: auto
(content height).
Therefore, you need to add height: 100%
to .handle
.
Also, in your element body
, you have not only your element .flex-box
, but also an element nav
with height: 250px
. Depending on how the browser handles the overflow (250px + 100%), this can cause the splitter element to disappear off-screen, which happens in Safari.
To avoid this 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 */
Also, if it body
is a flex container in a column, you can also use flex properties (like flex: 1
on .flex-box
) to use up the remaining space. You might not even need percentage heights. See my answer here for details .
source to share
Try changing the height in .handle-inner from 100% to 100vh. Configure it like this:
.handle-inner {
width: 10px;
margin-left: -5px;
height: 100%;
height: 100vh;
}
Edit: replace your CSS with
.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 as you stated. Try the height / max-height property.
source to share