I'm trying to add a width constraint on a flex container, and an horizontal overflow.
Children have margins, but I don't know why, last margin stays out of the container ; I can see it with Chrome debug, but the container simply ignore it...
Is there a way to force the flex container to take this margin in account ?
I tried to play with flex-wrap, box-sizing, even with padding the result is the same...
Thanks !
Here is a simple demo that you can run ; if you scroll to the end, there isn't any space left on the right.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<style type="text/css">
.container {
width: 300px;
border: 1px #000 solid;
display: flex;
overflow: auto;
scroll-snap-type: x mandatory;
}
.child {
min-width: 200px;
width: 200px;
border: 1px #f00 solid;
margin: 20px;
scroll-snap-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="child"><p>blablabla</p><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
</div>
</body>
</html>
I found that it works with an intermediate container, between .container and .child, with a display: flex property.
At least it works, but I don't know why I have to do this :/
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<style type="text/css">
.container {
width: 300px;
border: 1px #000 solid;
display: flex;
overflow: auto;
scroll-snap-type: x mandatory;
}
.intermediate {
display: flex;
}
.child {
min-width: 200px;
width: 200px;
border: 1px #f00 solid;
margin: 20px;
scroll-snap-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="intermediate">
<div class="child"><p>blablabla</p><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
</div>
</div>
</body>
</html>
It is the overflow that is ignoring the margin because it applies only to content. So the inner container is the solution like you did.
Working example with inline-flex (i removed scroll-snap since it is not necessary here):
.container {
width: 300px;
border: 1px #000 solid;
overflow: scroll;
}
.inner {
display: inline-flex;
}
.child {
min-width: 200px;
width: 200px;
border: 1px #f00 solid;
margin: 20px;
}
<div class="container">
<div class="inner">
<div class="child"><p>blablabla</p><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
</div>
</div>
You can handle this by adding :after to the .container
.container {
width: 300px;
border: 1px #000 solid;
display: flex;
overflow: auto;
scroll-snap-type: x mandatory;
}
.container::after {
content: '';
width: 20px;
flex-shrink: 0
}
.child {
min-width: 200px;
width: 200px;
border: 1px #f00 solid;
margin: 20px;
scroll-snap-align: center;
}
<!doctype html>
<html lang="fr">
<body>
<div class="container">
<div class="child"><p>blablabla</p><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
</div>
</body>
</html>
Related
I have a issue with css grid , i build a container with two div in it with css grid and i want to adjust container to page center. I use this code :
html{
width: 100vw;
height : 100vh;
}
body{
height : 100%;
}
.container-fluid{
width:100%;
height : 100%;
display:grid;
grid-template-columns: 300px;
grid-template-rows: 200px auto;
justify-content: center;
align-content: center;
border:1px solid red;
}
.logo-container{
background-color: khaki;
}
.form-container{
height :540px;
background-color: lightblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/media-query.css">
<title>Login & Register User With Profile</title>
</head>
<body>
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
<link rel="stylesheet" href="assets/css/all.css">
</body>
</html>
as you see when grid container height bigger then page height a issue occurs (please see code result).
when use height for body tag , grid height overflowing and when delete height from body tag every thing is ok but in this situ container can't adjust container in center of page.
what is problem?
Simplify your code like below:
body {
margin: 0; /* remove default margin */
}
.container-fluid {
min-height: 100vh; /* at least screen height */
display: grid;
grid-template-columns: 300px;
grid-template-rows: 200px auto;
justify-content: center;
align-content: center;
border: 1px solid red;
box-sizing:border-box; /* to consider the border inside the height */
}
.logo-container {
background-color: khaki;
}
.form-container {
height: 540px;
background-color: lightblue;
}
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
Or like below:
body {
margin: 0;
}
.container-fluid {
height: 100vh; /* full height */
display: grid;
grid-template-columns: 300px;
/* first row at 200px max-height and second row at 540px max-height */
grid-template-rows: minmax(auto,200px) minmax(auto,540px);
justify-content: center;
align-content: center;
border: 1px solid red;
box-sizing:border-box;
}
.logo-container {
background-color: khaki;
}
.form-container {
background-color: lightblue;
}
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
When comparing the following code in Chrome (v56) and Firefox (v51), Firefox is shifting the content down. Chrome behaves as expected.
<html>
<head>
<title>Test Page</title>
<style type="text/css">
.content {
height: 200px;
width: 200px;
}
.table {
width: 100%;
height: 50%;
display: table;
}
.leftCell {
border: 1px solid #cccccc;
width: 50%;
height: 100%;
overflow: auto;
display: table-cell;
}
.rightCell {
width: 50%;
height: 100%;
display: table-cell;
border: 1px solid #cccccc;
}
</style>
</head>
<body>
<div class="content">
<div class="table">
<div class="leftCell">
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
</div>
<div class="rightCell"></div>
</div>
</div>
</body>
</html>
Chrome:
Firefox:
The problem only appears when the 'rightCell' div is empty. If I remove that div, content displays where expected.
Anybody experienced this issue before? Any known fixes for this?
Regards
It's because the contents of table cells are vertically aligned along their baselines. If there is text in them, that's the first line. If there is no text in them, that's the bottom border of the cell, which you can see in the image you posted. That's the reason for the display your snippet results in.
To avoid it, assign vertical-align: top to both cells (see my snippet)
.content {
height: 200px;
width: 200px;
}
.table {
width: 100%;
height: 50%;
display: table;
}
.leftCell {
border: 1px solid #cccccc;
width: 50%;
height: 100%;
overflow: auto;
display: table-cell;
vertical-align: top;
}
.rightCell {
width: 50%;
height: 100%;
display: table-cell;
border: 1px solid #cccccc;
vertical-align: top;
}
<div class="content">
<div class="table">
<div class="leftCell">
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
</div>
<div class="rightCell"></div>
</div>
</div>
I have recently started learning flexbox. I am trying to set margins between the divs inside the .parent container, but the margin is not displaying. Also, if I give a width value to any of the .child divs, they still expand to cover the whole window. Where am I going wrong?
body {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100px;
border: 2px solid black;
justify-content: space-between;
}
.child {
flex: 1;
width: 32%;
margin: auto;
height: 100px;
border: 2px solid blue;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
You need to remove flex: 1;, which is causing the div's to resize to fill the empty space.
body {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100px;
border: 2px solid black;
justify-content: space-between;
}
.child {
width: 32%;
margin: auto;
height: 100px;
border: 2px solid blue;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
"margins" in flexbox are going to be controlled mainly by the width of your containers, not by specifying margins. Use flex-basis to determine the width of your containers and remove the flex: 1. That's what's causing your containers to expand. And remember it's "flex" box. it's meant to fluid, so trying to adapt static values for things like margin defeats the purpose.
Tip: When debugging use background colors and not borders. Borders effect width and can cause you trouble. Cheers.
body {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100px;
justify-content: space-between;
background-color: blue;
}
.child {
flex-basis: 20%;
height: 100px;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
As Hunter Turner says if you remove flex: 1 it will work. This property sets the length of the item relative to the others.
MDN Docs
body {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100px;
border: 2px solid black;
justify-content: space-between;
}
.child {
width: 32%;
margin: auto;
height: 100px;
border: 2px solid blue;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
As I was trying to get more familiar with vertical-align property I came across a problem. The default value of the property is baseline, which aligns the baseline of the element with the baseline of its parent. I made the h2 element at the bottom of the code display as inline-block to see how it behaves and that's when I got surprised. Shouldn't it show just right above the border of the body same as the blue box shows, instead of being somewhere in the centre of the body? It looks like aligning those boxes(divs) vertically affects where the baseline of the body is, but why? Please, click "Full page" when running the code snippet to see the behaviour.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical align</title>
<style>
body {border: 1px solid black; line-height: 1;}
.box {
display: inline-block;
width: 150px;
vertical-align: middle;
}
.tall {
height: 300px;
background-color: lightblue;
}
.short {
height: 100px;
background-color: green;
}
.middle {
height: 200px;
background-color: yellow;
}
.square {
display: inline-block;
width: 5px;
height: 5px;
background-color: red;
vertical-align: middle;
}
h2 {display: inline-block;}
</style>
</head>
<body>
<h1>Vertical Align</h1>
<div class="box tall"></div>
<div class="box short"></div>
<div class="box middle"></div>
<h2>Picture aligned <div class="square"></div> within text</h2>
</body>
</html>
I expected h2 to go down as you can see in the picture below.
I highly recommend reading this vertical-align article to gain in-depth understanding of the property.
The element is aligned this way because baseline aligns it with the baseline of the text inside the parent element.
In your case, the text baseline is pushed down by the large inline-block divs. The h2 aligns with this text. If you want it to align with the bottom of the other inline-elements (as shown in your image), add the style vertical-align: bottom to your h2.
This article explains the different vertical-align values very well:
https://css-tricks.com/what-is-vertical-align/
When you are using inline-block, it is better to handle your elements by positioning them.See my changes in css-style for h2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical align</title>
<style>
body {border: 1px solid black; line-height: 1;}
.box {
display: inline-block;
width: 100px;
vertical-align: middle;
}
.tall {
height: 300px;
background-color: lightblue;
}
.short {
height: 100px;
background-color: green;
}
.middle {
height: 200px;
background-color: yellow;
}
.square {
display: inline-block;
width: 5px;
height: 5px;
background-color: red;
vertical-align: middle;
}
h2 {
display: inline-block;
width:300px;
size:10px;
vertical-align:bottom;
}
</style>
</head>
<body>
<h1>Vertical Align</h1>
<div class="box tall"></div>
<div class="box short"></div>
<div class="box middle"></div>
<h2>Picture aligned <div class="square"></div> within text</h2>
</body>
</html>
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A+Tec</title>
<style type="text/css" >
* {
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
height: auto;
background-color: #ABEBC1;
position: fixed;
}
#nav {
width: 720px;
height: auto;
margin: auto;
}
.buttons {
height: 25x;
width: 150px;
background-color: #ABEBFF;
background-repeat: repeat-x;
float: left;
margin: 0px 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<div class="buttons">
</div>
<div class="buttons">2</div>
<div class="buttons">3</div>
<div class="buttons">4</div>
<div class="buttons">5</div>
<div class="buttons">6</div>
</div>
</div>
</body>
</html>
I have the wrapper with the divs inside. There is clearly enough space for all the divs yet one of them overflows to next line as in picture:
I have no idea what is wrong but the div with 6 in it has overflowed onto the next line but the wrapper is plenty big enough to accomodate it. Can you please help me?
Thanks