When the height of the parent flex element is set to less than the min-height, the expected result should be for the element to expand to contain its content. This works with flex-direction:row and min-width: min-content, but using literally the same code but with column instead of row and min-height instead of min-width doesn't cause the parent element to expand but instead retain its original height and clipping its' children.
.flex-row{
display: flex;
flex-direction: row;
justify-content: space-around;
height : 200px;
border-style: solid; border-width: 2px; border-color: black;
/* Width is set to 100px but because the min-content is 600px, the width overridden. */
min-width: min-content;
width: 100px;
}
.block-row{
align-self: stretch;
background-color: red;
width: 300px;
border: 2px solid blue;
}
/* Literally same code except flex-col and min-height */
.flex-col{
display: flex;
flex-direction: column;
justify-content: space-around;
min-height: min-content;
border-style: solid; border-width: 2px; border-color: black;
}
.block-col{
align-self: stretch;
background-color: red;
height: 300px;
border: 2px solid blue;
}
<!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">
<title>min-content :(</title>
</head>
<body>
Intended effect works with flex-row min-width
<div class="flex-row" style="width: 100px; height : 200px; ">
<div class="block-row"></div>
<div class="block-row"></div>
</div>
</br>
Doesn't work with same code except min-height :(
</br>
-> Height is set to 100px, but instead of min-height of children causing height to grow, it is stuck at 100px for some reason.
</br>
<div class="flex-col" style="height: 100px; width : 200px; ">
<div class="block-col"></div>
<div class="block-col"></div>
</div>
</body>
</html>
instead of using px use vh that allow you to use the relavite space in the container
Related
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>
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>
I have a flex container, and in that container, I have a bunch of images. Using flexwrap, and a flex-item width of 33%, this presents the images nicely ... in Chrome (that is, they maintain their aspect ratios). In Safari, however, the images get stretched in the vertical direction which looks terrible.
Is there a fix for this?
(Note: For the code snippet below, you will have to open this post in both Chrome and Safari to see what I am talking about)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<img src='https://swipestack.s3.amazonaws.com/s/q/1.jpg' alt='1'>
<img src='https://swipestack.s3.amazonaws.com/s/q/2.jpg' alt='2'>
<img src='https://swipestack.s3.amazonaws.com/s/q/3.jpg' alt='3'>
<img src='https://swipestack.s3.amazonaws.com/s/q/4.jpg' alt='4'>
<img src='https://swipestack.s3.amazonaws.com/s/q/5.jpg' alt='5'>
<img src='https://swipestack.s3.amazonaws.com/s/q/6.jpg' alt='6'>
<img src='https://swipestack.s3.amazonaws.com/s/q/7.jpg' alt='7'>
<img src='https://swipestack.s3.amazonaws.com/s/q/8.jpg' alt='8'>
</div>
</body>
<style>
.container{
display: flex;
flex-wrap: wrap;
overflow: auto;
width: 400px;
height: 550px;
padding: 10px;
background-color: green;
}
.container > * {
width: 33.33333%;
}
</style>
</html>
you can try this, which works only if you give the first and second images the same height of 475px as the others :
<style>
.container {
width: 400px;
height: 550px;
padding: 10px;
background-color: green;
overflow: auto;
}
.container:first-child {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.container > * {
width: 33.33333%;
height: auto;
}
</style>
I am testing so css (css-grid) and here is the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
html, body {
height: 100%;
}
.container {
display: grid;
height:100%;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr;
grid-template-areas:
"h h";
}
.header {
height: 300px;
grid-area: h;
background-color: red;
}
.box {
display: grid;
background-color: green;
height: 50px;
width: 50px;
align-self: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="box">Box1</div>
</div>
</div>
</body>
</html>
If you look at class name 'box' above, you can see that it's got display: grid and align-self: center.
When I run this I'm getting this error in the console:
"align-self has no effect on this element since it’s not a grid or flex item.
Try adding display:grid, display:flex, display:inline-grid, or display:inline-flex."
As you can see display: grid is there...Why is this happening?
It looks to the parent container. So your box is a child of "header".
If you place display:grid in the header css class, you will see that it works
.header {
height: 300px;
display:grid;
grid-area: h;
background-color: red;
}
In your CSS below:
.box{
display: grid;
background-color: green;
height: 50px;
width: 50px;
align-self: center;
}
Your .box selector's div becomes your grid-container which means
align-self cannot be used on this, align-self is used on grid-items to align along vertical direction. The property that we use to
control alignment of all the grid-items from grid-container is align-items.
I know that we can create a responsive horizontal image easily, like that.
.img-horiz-resp {
max-width:100%;
height:auto;
}
But, in my case I need :
a header on top
a content (for now it can be a simple image)
a footer
Then, when resizing the browser vertically, I wish that the 'content' adapt its size.
I have try here : https://codepen.io/cdemez/pen/qBbKVYp
But without success.
By using VH for the height you can get you image responsive (there are other ways too, but this is simple).
VH is used for how much of the available height that should be used, like percent (%). 100VH is the whole screen from top to bottom, regardless of your screen size.
Now I put the image in the css-file (and used it ONLY as background, not background-image), but if you want to use it in your html-file, remember to set your with to 100%.
https://jsfiddle.net/battleaxe/u07cfbog/#&togetherjs=lbxrukCzHi
HTML:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100%;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
header {
height: 6vh;
width: 100%;
background-color: #2e4b49;
display: flex;
justify-content: center;
align-items: center;
}
ul {
width: 60%;
display: flex;
justify-content: space-between;
list-style: none;
color: #fff;
text-transform: uppercase;
}
.content {
height: 84vh;
width: 100%;
background: url("https://cdn.socloze.com/cdn/e_663aa122-718e-a8d3-301d-39f64b8523b0/ebdc5bef01506acc759b39f64b9cc917.jpg")
no-repeat center center;
background-size: contain;
/* You can use background-size: cover; if you want the image to cover your whole free space. */
}
footer {
height: 10vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #2e4b49;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<ul>
<li>This</li>
<li>Is</li>
<li>a</li>
<li>Header</li>
</ul>
</header>
<div class="content"></div>
<footer>
<p>This is a footer</p>
</footer>
</body>
</html>
Things you can look up are VH and VW, how the work and how they can be used. Also, try different background-sizes (cover, contain, and so on).
Good Luck!