I have been scowering the web, but can not seem to get a solution to work.
Here is an example codepen:
http://codepen.io/anon/pen/Wxjjqp
.container {
display: flex;
}
.horizontally-scrolled-items {
display: flex;
background: lightblue;
overflow-x: scroll;
}
.item {
width: 1000px;
border: 1px solid blue;
}
html:
<div class="container">
<div class="horizontally-scrolled-items">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
<div class="aside">
<button>keep me on screen</button>
</div>
</div>
The idea is for horizntally-scrolled-items to be flex:1. If the items are greater than the width of the container, for them to scroll, leaving aside in the view.
You can achieve this with min-width. Give your .item class a min-width with a flex-grow: 1;. Then set your .horizontally-scrolled-items div to width: 100%;.
CSS
.horizontally-scrolled-items {
width: 100%;
}
.item {
min-width: 400px;
flex-grow: 1;
}
CodePen
With Flex box
.horizontally-scrolled-items {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.item {
flex: 0 0 auto;
}
Without Flex box
.horizontally-scrolled-items {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.item {
display: inline-block;
}
Another way is to set the items with and flex: 0 0 auto which is short hand for flex-grow: 0; flex-shrink: 0, so flexbox does not try to resize the items.
Related
I have the following code as working on development with flexbox.
#container {
display: flex;
justify-content: space-around;
width: 100%;
}
.content {
border: 1px solid black;
display: flex;
flex-direction: column;
height: 400px;
width: 400px;
}
#item1 {
background-color: red;
flex-grow: 1;
height: 0;
}
#item2 {
background-color: green;
flex-grow: 1;
height: 100px;
}
#item3 {
background-color: blue;
flex-grow: 1;
height: 900px;
}
<div id="container">
<div class="content">
<div id="item1"></div>
</div>
<div class="content">
<div id="item2"></div>
</div>
<div class="content">
<div id="item3"></div>
</div>
</div>
I know that setting flex-grow: 1 would take the remaining space of its parent. However, the property height seems to have no effect whatever its value is.
Reason being your flex-direction is set to column, which mean the flex-grow reacts from top to bottom, so the flex-grow responding to the height instead of width.
another question is, why flex-direction is column, but width is filled up, because it is a <div> displayed as block, the width is auto filled by display: block;
you are using flex-grow that’s why. have a look on this https://www.w3schools.com/cssref/css3_pr_flex-grow.asp
https://stackoverflow.com/a/64748435/1095913 (down here) is right, solution is: flex-grow: 0;
Here's another reference https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
Sorry, another flexbox related question :)
I have two flex elements :
A container (red) containing a centered div (yellow)
A footer (blue) with an undefined height
The red container has a flex-grow:1 attribute, forcing it to take the remaining space on the screen
The issue happens when the yellow element is bigger than the screen size. I would like my red container to grow based on its content. Any idea of how I could do that ?
HTML:
<div class="container">
<div class="content"></div>
</div>
<div class="footer"></div>
CSS:
body,
html {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.container {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
background: red;
}
.content {
background: yellow;
height: 2000px;
width: 100px;
}
.footer {
flex-shrink: 0;
height: 50px;
background-color: blue;
}
https://codepen.io/stepinsight/pen/roRVGQ
== EDIT ==
Andre helped me find the answer, thanks heaps !
The only thing you need to change in the code above is to replace height by min-height and the % by vh for the body/html tags 🎉
body,
html {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
Simply remove the height property on the body element and add height: 100% to html
* { box-sizing: border-box; }
html {
height: 100%
}
body {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
background: red;
}
.content {
background: yellow;
height: 2000px;
width: 100px;
}
.footer {
height: 50px;
background-color: blue;
}
Corrected: https://codepen.io/ferreirandre/pen/maoVvb
Feel free to play around with the height of .content
I need the .content div use all the available space
body {
height: 100%;
}
.nav {
padding: 20px;
}
.content {
height: 100%;
}
<body>
<div class="nav">nav</div>
<div class="content">content</div>
</body>
Since I don't know the height of the .nav I can't use height: calc(100%-Xpx)
is there any other way to make .content use the remaining height of the page?
Thanks
Use min-height: 100vh on body, then set the parent (body in this case) to display: flex; flex-direction: column and use flex-grow: 1 on .content for it to use the available space.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
}
.nav {
padding: 20px;
}
.content {
flex-grow: 1;
background: #eee;
}
<div class="nav">nav</div>
<div class="content">content</div>
Here is a div container. I know how to easily use display and width to make it look like this, but how to use CSS3 flexbox to make 4 buttons layout as follow?
.container {
background-color: blue;
width: 200px;
padding: 10px;
}
button {
display: block;
width: 100%;
}
button:nth-of-type(2),
button:nth-of-type(3) {
width: 49%;
display: inline;
}
<div class="container">
<button>Button1</button>
<button>Button1</button>
<button>Button1</button>
<button>Button1</button>
</div>
Use flex-flow:row wrap and make the top / bottom buttons take twice the space
div, div *{box-sizing:border-box;}
div{display:flex;flex-flow:row wrap;padding:50px;}
div button{flex:1;}
div button:first-child,
div button:last-child{flex:2 100%}
<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
HTML
<div class="container">
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
<button>Button4</button>
</div>
CSS
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: blue;
width: 200px;
padding: 10px;
}
button { margin: 5px 0; }
button:nth-of-type(1),
button:nth-of-type(4) { flex: 1 1 100%; }
button:nth-of-type(2),
button:nth-of-type(3) { flex: 0 1 45%; }
DEMO
This question already has answers here:
HTML5 flexible box model height calculation
(2 answers)
Closed 4 years ago.
I have a container flex with content flexes. How do i make content flex occupy full width and height of container flex.
<div id="main">
<div id="main-nav">
</div>
<div class="container">
<div class="content"></div>
<div class="content"></div>
</div>
</div>
#main{
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
#main-nav{
width: 100%
height: 50px;
}
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
}
.content{
display: flex;
width: 100%;
height: 100%;
}
The above code makes content to occupy 100% width of container but height is based on the text within the content. I tried the solutions mentioned from similar questions but had no luck and it was still the same.
Basically, I want each of the content to occupy the same height as occupied by the container in the viewport height. I also tried jQuery,
var rht = $("#container").height();
$(".content").height(rht);
It changes the height properly but adds a horizontal scroll bar with increase in width.
After several updates to the original question:
* {
box-sizing: borderbox;
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
border: 1px solid red;
min-height: 100vh;
}
#main-nav {
flex: 0 0 50px;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
border: 1px solid green;
}
.content {
flex: 1;
border: 1px solid orange;
}
<div id="main">
<div id="main-nav"></div>
<div class="container">
<div class="content"></div>
<div class="content"></div>
</div>
</div>
JSfiddle Demo
You cannot set width or height of flex's child is bigger (size of flex)/(number of flex's childs) but you can add position: absolute into .content and position: relative into .container then set width and height for .content. First .content is under second .content, you can use propety z-index or display: none to control.
* {
box-sizing: borderbox;
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
background: red;
min-height: 100vh;
}
#main-nav {
flex: 0 0 50px;
}
.container {
position: relative;
display: flex;
flex: 1;
background: green;
}
.content {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
flex: 1;
background: orange;
}
<div id="main">
<div id="main-nav"></div>
<div class="container">
<div class="content">left</div>
<div class="content">right</div>
</div>
</div>