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/
Related
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/
I am trying to achieve a layout with multiple elements of different height stacked on mobile screens and some elements forming a sidebar for desktop, roughly looking like this:
My first idea was to achieve it via CSS grid, defining one row with two columns and then assigning the grid-area depending on the class (orange vs gray):
Codepen
.layout {
display: grid;
max-width: 860px;
margin: 0 auto;
gap: 20px;
}
#media(min-width: 860px) {
.layout {
grid-template-areas: 'main sidebar';
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: main;
}
Problem: as multiple sidebar elements now occupy the same grid cell, they overlap instead of just flow on top of each other. I've been trying to wrap my head around alternative solutions for a few days now, but I couldn't find any so far that did not involve reordering the dom with JavaScript. Am I missing the obvious?
EDIT
Flexbox as stated in the answers does not solve this problem (if the position of elements within the list would be known upfront maybe, but this is not the case). Some elements go in the sidebar, some go in the main bar while having a fixed order in the mobile layout.
Use Flexbox, then you can easily do this.
Refer following code,
.layout {
display: flex;
flex-wrap: wrap;
max-width: 860px;
margin: 0 auto;
gap: 20px;
}
set correct order of div (containers) as you need, (the following code is sample one)
<div id="main">
<div style="background-color:coral;" id="myRedDIV"></div>
<div style="background-color:lightblue;" id="myBlueDIV"></div>
<div style="background-color:lightgreen;" id="myGreenDIV"></div>
<div style="background-color:pink;" id="myPinkDIV"></div>
</div>
#main {
width: 100%;
height: 150px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
}
#main div {
width: 70px;
height: 70px;
}
/* Standard syntax */
div#myRedDIV {order: 1;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 2;}
Refer following links for more about Order in Flexbox
Link1 --> About Flexbox Order
Link2 --> About Flexbox Order
Why don't you try with flexbox. you can do it using display:flex, for more about the flex refer below sample.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>
</body>
</html>
This might not be the answer to your question! (cause I've changed the grid layout into FlexBox)
In this example I'm changing flex-direction via screen breakouts.
More Information on CSS Flex box Direction
Code:
* {
border: 1px solid coral;
padding: 12px;
margin: 12px;
}
.layout {
display: flex;
flex-direction: column;
align-items: center;
}
.layout>* {
display: flex;
flex-direction: row;
}
.sidebar {
background-color: yellow;
}
.content {
background-color: grey;
}
#media(max-width: 860px) {
.layout {
display: flex;
flex-direction: column;
align-items: center;
}
.layout>* {
display: flex;
flex-direction: column;
}
.sidebar {
background-color: yellow;
}
.content {
background-color: grey;
}
.content {
background-color: green;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="layout">
<div>
<div class="content big">
Here's some text
</div>
<div class="sidebar small">
Sidebar Item
</div>
</div>
<div>
<div class="content big">
More Text
</div>
<div class="sidebar small">
another sidebar Item
</div>
</div>
</div>
</body>
</html>
I have the following html tree:
div with padding: 2rem 1.25rem;
div with max-width: none so that it overflows past the screen's width
The padding is applied correctly on the top, bottom and left side, but not on the right.
I know what's the problem but I'm not sure how to solve it. The parent div has a width of 375px, which is the screen's width, whereas the child div has 890px. How can I make the parent expand like the child?
There are a few other ancestors for the parent div above. Do I need to make all of them expand?
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
display: flex;
flex-flow: row nowrap;
padding: 2rem 1.25rem;
}
.child {
background-color: #f5f8ff;
border: 1px solid #eff5f5;
display: flex;
flex-flow: row nowrap;
min-width: 100vw;
}
.item {
align-items: center;
display: flex;
flex-flow: row nowrap;
justify-content: center;
height: 44px;
width: 256px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<div class="item">Foo</div>
<div class="item">Bar</div>
<div class="item">Baz</div>
<div class="item">Qux</div>
</div>
</div>
</body>
</html>
Your question is very vague but if you want your parent div to just basically always be just big enough to house your child div. You can try setting your parent div to display: inline.
.parentdiv{
display: inline;
}
And by not setting a width. The parent div will always just be big enough to hold its children divs.
Hope this helps.
Give this a try:
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
display: flex;
flex-flow: row nowrap;
padding: 2rem 1.25rem;
}
.child {
background-color: #f5f8ff;
border: 1px solid #eff5f5;
display: flex;
flex-flow: row nowrap;
min-width: 100%;
}
.item {
text-align: center;
flex: 0 0 25%;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<div class="item">Foo</div>
<div class="item">Bar</div>
<div class="item">Baz</div>
<div class="item">Qux</div>
</div>
</div>
</body>
</html>
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>
This is a simplified version of a more complex problem. Suppose there are two divs within the body, which have to be vertically centered. Because of some other requirements DOM can't change. So only by changing css I need to vertically align them center. I have tried many other stackoverflow posts but so far couldn't make it work.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
body{
}
.div1{
display: block;
background: red;
width: 300px;
}
.div2{
display: block;
background: green;
width: 300px;
}
</style>
</head>
<body>
<div class="div1">
<p>This is div1</p>
</div>
<div class="div2">
<p>This is div2</p>
</div>
</body>
</html>
This is possible using flexbox.
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
See this CodePen