I have a text-containing element where the text can be very long. I want to hide overflow text and I don't want the text to increase the size of the element or its parents/ancestors.
Adding the following to the element CSS seemed to work at first (from this question, but height not width):
height: 0;
min-height: 100%;
This works on Chrome; however, it doesn't quite seem to work on Safari (mobile or desktop). Here is an example:
The image shows a side-by-side comparison of Chrome (left) and Safari (right). The text should be vertically centered but as can be seen, the Safari text is not. Eventually, if the page height gets too small, the text disappears completely.
The HTML is at the foot of this post (sorry I couldn't get it shorter).
Inspecting via devtools on Chrome (Version 88.0.4324.146) and Safari (Version 13.1.3), both on a Mac, the problem seems to be that the inner element is oversized on Safari.
This seems to be directly caused by the height:0;min-height:100% trick, in that replacing these lines with height:100% causes the centering problem to go away in Safari (but then the layout is perturbed in Chrome when the text is longer).
As I understand it, the min-height:100% should set the inner element's height to the height of the containing block, which (since inner has position:relative and its parent card has display:flex), should be the content box of the parent card element, as described here.
This appears to work as described in Chrome, but not Safari. I am not sure where Safari is getting the height of the inner element from, but it's clearly taller than card.
For context, here is what the original problem that I was having looks like (layout messed up in Chrome when there's a lot of text in the cyan box). This is the problem that I was trying to solve with the height:0;min-height:100%. For this screenshot I removed those lines and just put height:100%. Here's what that looks like (again, Chrome on left and Safari on right)
As you can see, the orange box has disappeared in Chrome (left).
Adding the height:0;min-height:100% back in causes this to render correctly (but with the problem described above, that the text is not vertically centered in Safari - it looks centered here, but that's only because the overflow is hidden so the card appears full of text):
Any insights appreciated. Is this just a bug in Safari? Is there a workaround? Or (more likely) am I just a CSS klutz...
Update: here's what it looks like in Safari devtools. The parent card element has height 938px, but the inner has height 1121px and pushes the bottombar off the screen.
<html>
<head>
<style>
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
body {
position: relative;
}
.page {
background: midnightblue;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.central-column {
display: flex;
flex-direction: column;
}
.bottombar {
background: orange;
height: 80px;
z-index: 30;
display: flex;
flex-direction: column;
justify-content: space-around;
font-size: 2vh;
text-align: center;
}
.foo {
background: pink;
position: relative;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.foo,
.central-column {
width: 800px;
max-width: 800px;
height: 100%;
}
.foo .topbar {
background: red;
position: relative;
display: flex;
flex-direction: row;
justify-content: space-around;
min-height: 90px;
height: 15vh;
max-height: 90px;
}
.foo .cardbar {
position: relative;
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 4px 20px;
}
.foo .cardtable {
background: green;
position: relative;
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 4px;
}
.foo .stack {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
z-index: 6;
position: relative;
padding: 4px 20px;
}
.foo .stack .card {
background: cyan;
position:relative;
max-height: 160vw;
flex-grow: 1;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 2vh;
border-width: 1px;
border-style: solid;
}
.foo .stack .card .inner {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 0;
min-height: 100%;
/*
Replacing the previous two lines with this line fixes the centering on Safari,
but then longer text (that would overflow the cyan box) breaks the layout in Chrome
height: 100%;
*/
text-align: center;
overflow: hidden;
margin: 4px;
}
</style>
</head>
<body>
<div class="page">
<div class="central-column">
<div class="foo">
<div class="topbar">
</div>
<div class="cardbar">
<div class="cardtable">
<div class="stack">
<div class="card">
<div class="inner">
<div class="content">
this text should be vertically centered in the cyan box
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottombar"></div>
</div>
</div>
</div>
</body>
</html>
