I'm trying to hide half-overflowed items in my CSS. I found a great method using css columns: https://stackoverflow.com/a/48378030/1305699
It works great in Firefox, but in Chrome I found some really odd behaviour under certain seemingly random combinations. For example, I managed to re-produce it by adding a height to one of the items, when the container is certain specific sizes, it causes the layout to randomly flicker into very odd sizes.
This is it working fine:
But sometimes when the last item, with a height: 20px style, it randomly looks like this:
In some positions, chrome even thinks it's rendering it correctly in the (hidden) second column, but it's actually being drawn half off, and at an odd size, in the first column:
Has anyone seen this issue and know a solution or workaround?
html,
body {
height: 100%;
width: 100%;
}
#container {
padding: 5px;
height: 50px;
resize: both;
overflow: hidden;
}
#container-2 {
height: 100%;
width: 200%;
column-count: 2;
column-fill: auto;
}
.item {
background: aliceblue;
margin: 2px;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
overflow: hidden;
}
.item div {
margin: 0.3rem;
}
.item span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="container" style="width: 150px; outline: 1px red solid;">
<div id="container-2">
<div class="item">ONE LINE</div>
<div class="item">
<div>i</div><span>SECOND LINE</span>
</div>
<div class="item">
<div>i</div><span>THIRD LINE</span>
</div>
<div class="item">
<div>i</div><span style="height: 20px;">FOURTH LINE</span>
</div>
</div>
</div>
</body>
</html>
Ah, turns out I need the break-inside: avoid on the items which makes the column avoid attempting to break items over the column.
https://css-tricks.com/almanac/properties/b/break-inside/
Related
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 1 year ago.
Below is simple example illustrating the problem. I have "Stackoverflow Stackoverflow" string and in first case it is displayed as a single line and in the second case word wrap happens. As you can see in the second case width of the div element is wider than a single "Stackoverflow" word. Is there a way to get rid of this empty space on the right? Resulting element has width 200px as specified per max-width but I want element to have actual width which is enough to fit it into 200px after word wrap.
body {
font-size: 30px;
}
.row {
margin-bottom: 10px;
}
.text-no-wrap {
background: yellowgreen;
white-space: nowrap;
display: inline-block;
}
.text-wrap {
max-width: 200px;
background: tomato;
white-space: normal;
display: inline-block;
}
<div class="row">
<div class="text-no-wrap">Stackoverflow Stackoverflow</div>
</div>
<div class="row">
<div class="text-wrap">Stackoverflow Stackoverflow</div>
</div>
You could try adding width: max-content; to the div's insde the .row
Note that width: max-content; isn't supported in Internet Explorer, but is supported on all other browsers.
Check the support of width: max-content; here.
I've added flex-direction: column; to the .row so the children of those
div's will appear underneath each other.
If you need display: flex; on the .row div, then This is the way to go. If you don't need display: flex; on the .row div, just simply remove it. And only use width: max-content; on the children;
body {
font-size: 30px;
}
.row {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.text-no-wrap {
width: max-content;
background: yellowgreen;
}
.text-wrap {
width: max-content;
background: tomato;
}
<div class="row">
<div class="text-no-wrap">Stackoverflow1 Stackoverflow2</div>
</div>
<div class="row">
<div class="text-wrap">Stackoverflow1 Stackoverflow2</div>
<div class="text-wrap">Stackoverflow1 Stackoverflow2</div>
</div>
I believe this one is not a text-wrap issue. If you check the following code you will get multiple spaces in between wrapping text. This one is due to the
max-width: 200px;
specified for
.text-wrap.
body {
font-size: 30px;
}
.row {
display: flex;
margin-bottom: 10px;
}
.text-no-wrap {
background: yellowgreen;
white-space: nowrap;
}
.text-wrap {
max-width: 200px;
background: tomato;
white-space: normal;
}
<html>
<body>
<div class="row">
<div class="text-no-wrap">Stackoverflow Stackoverflow</div>
</div>
<div class="row">
<div class="text-wrap">Stackoverflow Stackoverflow testing text wrapping space issue</div>
</div>
</body>
</html>
Go through the demo you can see that after "testing text" multiple spaces is there.
I'm relatively new to web development and I can't quite figure out why I am getting overflow with a height set to 100% using flexbox. I would like to have the columns fill the entire height of the container but not overflow. Any help would be much appreciated. Also, I'm certain this is super simple.
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
.leftCol{
background-color: gray;
text-align: center;
padding-right: 10px;
flex: 25%;
}
.rightCol{
background-color: lightblue;
text-align: center;
flex: 75%;
}
.row {
display: flex;
flex-wrap: nowrap;
margin: 0;
}
.canvas{
border:1px solid #000000;
width: 100%;
height: 100%;
margin: 0%;
}
</style>
</head>
<body >
<div class="row">
<div class="leftCol">
Col1
<canvas class="canvas" id="architectureCanvas"></canvas>
</div>
<div class="rightCol">
Col2
<canvas class="canvas" id="architectureCanvas"></canvas>
</div>
</div>
</body>
</html>
https://jsfiddle.net/jp64mqr7/2/
The reason why you have overflow is that you set canvas height to 100% and also you have some text above that takes some space as well, and as a result, you got overflow because you need more space than you have.
To fix it, you should probably:
On the leftCol and the righCol you should add:
display: flex;
flex-direction: column;
Also, on .canvas you should add:
height: auto;
flex-grow: 1;
JSFiddle link: https://jsfiddle.net/velid/6eo45ycj/8/
I am just facing a super weird problem. My actual goal was to build a scrollable flex-box content box between two sidebars (left and right) for an angular app. First I did a prototype in an html and it works fine! But then I started to implement it inside the app and the elements don't behave the same. In order to debug the problem, I replaced the elements and styles with exact the same tags and css styles, from my html-file, but it still doesn't look the same.
How it looks with the html-file
The sidebars have a full height
The centered content box has a vertical and horizontal scroll section.
This is the outcome of the angular app
The height of the sidebars don't stretch over the full height.
the centered box has ONLY a horizontal scroll section.
The padding of the container seems to have an effect of the .boxsidebar, because the .boxsidebar is not sticking on top (like in image 1).
Here is the code, which is used for both solutions. In the angular app, the html is added in the app.component.html and the style in app.style.scss:
<head>
<style>
body{
margin: 0;
}
.boxsidebar{
display: inline-block;
width: 25%;
height: 100%;
background-color: blue;
}
.container{
display: inline-block;
width: 74%;
}
.map{
display: inline-flex;
-webkit-flex-flow: column;
flex-flow: column;
height: 100%;
width: 74%;
box-sizing: border-box;
padding: 16px;
}
.toolbar{
width: 100%;
height: 100px;
background-color: chartreuse;
}
.sidebar{
display: inline-block;
width: 25%;
height: 100%;
background-color: blueviolet;
}
.wrapwrap{
min-height: 0;
flex: 1;
overflow: auto;
}
.someBigStuff{
background-color: aquamarine;
height: 2000px;
width: 2000px;
}
</style>
</head>
<div class="box">
<div class="boxsidebar">
<h3>Hello</h3>
<div class="sidebar_content">
</div>
</div>
<div class="container">
<div class="map">
<div class="toolbar">Hello</div>
<div class="wrapwrap">
<div class="someBigStuff"></div>
</div>
</div>
<div class="sidebar">
<h3>Hello</h3>
<div class="sidebar_content">
</div>
</div>
</div>
</div>
Final hint: I unchecked every additional style in the css-inspector window, so that both pages have the same base.
Thank you for your time and help!
Hello I have this single .html file. When I open it in Chrome/Firefox/etc it works as expected, but when I open it with IE there is a unneeded vertical scrollbar that has very little "play". What is causing this and how can I fix it? Is there a better way to set headers/content/footers with css?
Thanks here's a screencap.
html,
body {
height: 100%;
margin: 0;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
</style>
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<p>
<b>content</b>
(fills remaining space)
</p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>
There are several ways to do this.
Method 1: The simplest way would be to hide the scrollbars under a <style> tag as shown:
body {
overflow-y: hidden;
}
Likewise, overflow-x: hidden will hide the horizontal scrollbar, and overflow: hidden will hide both horizontal and vertical scrollbars. Beware, however, that this not only hides the scrollbars, but removes its functionality. Therefore, if you add more content that exceeds the display of your page, it will just be cut off.
Method 2: If you want to hide the scrollbar but keep its functionality, then replace the above code with:
<style>
body::-webkit-scrollbar {
display: none;
}
</style>
This should occur across all browsers, in case your issue persists elsewhere.
Method 3: If you want this to specifically happen only for Internet Explorer, try the following:
<style>
.container {
-ms-overflow-style: none;
overflow: auto;
}
</style>
My page starts to change zoom and layout gets slightly messed up when I have a hardcoded width on items located in a Flexbox container (make a very narrow Chrome Devtools responsive window). The problem starts when I make my viewing area narrower than the 300px. Unfortunately, you can't see this problem when running this inside an iframe on jsfiddle - it has to be ran "on it's own", my html block needs to be THE top html block.
Here's the jsfiddle for reference still:
https://jsfiddle.net/elijahww/9e1u7ptr/
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#productShowcaseContainer {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
.contentContainer {
display: flex;
flex: 1;
}
#productShowcaseTitle {
height: 100px;
background-color: antiquewhite;
}
#productShowcaseThumbnailContainer {
flex: 1;
background-color: darkseagreen;
}
</style>
</head>
<body style="margin: 0;">
<div id="productShowcaseContainer">
<div id="productShowcaseTitle"></div>
<div class="contentContainer">
<div id="productShowcaseThumbnailContainer" style="padding: 10px;">
<input style="width:300px;">
</div>
</div>
</div>
</body></html>
I don't know how to make this work.
here is a gif:
This might be happening because you have hard-coded width of input field as 300px and trying to zoom screen width beyond this.
If you really want to have responsive layout then you should be using flex-layout properly and set flex-basis, flex-grow and flex-shrink property of each layout element.
These properties are responsible for handling responsive behaviour of flex-elements.
To Read more about flex layout follow this link Flex tutorial
One option is to give some parent container overflow-x: auto
body {
background-color: #3d5d6a;
}
#container {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
.main-content-container {
display: flex;
flex: 1;
}
#top-header-container {
padding: 10px;
height: 100px;
background-color: antiquewhite;
/*align-content: stretch;*/
display: flex;
justify-content: stretch;
}
#main-content-inner {
flex: 1;
background-color: darkseagreen;
}
.responsive-table {
overflow-x: auto;
}
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="margin: 0;">
<div id="container">
<div id="top-header-container">
<div class="responsive-table">
<input style="width:400px;" value="hard coded to 400px">
</div>
</div>
<div class="main-content-container">
<div id="main-content-inner" style="padding: 10px;">
test
</div>
</div>
</div>
</body></html>