I have a parent with a flex child :
.card {
background-color: white;
max-width: 80vw;
height: auto;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
bottom: 10;
overflow: hidden;
border-radius: 32.5vw;
z-index: 100001;
}
.menusC {
width: auto;
height: auto;
margin: auto;
display: inline-flex;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
justify-content: center;
background-color: red;
}
<div class="card">
<div class="menusC">
<div class="menuBC">
......
</div>
</div>
</div>
As you can see my flex is inline-flex which means the flex get the size of its items.
But the parent card insist to have it's own width (takes the max otherwise 100%).
How would i make the card - be exactly at the width of the flex - menusC ?
I have not seen what it looks like when the code is executed, but why has the parent got a fixed position with left and right set to 0?
This is telling it to go all the way from left to right.
Maybe change position: fixed to something else, or remove the left or right properties if fixed position is needed.
Related
If I set #main.overflow is none, I get what I want.
And if I set #main.overflow is scroll, which is not what I want, the last element is broken by error.
Why do scroll bars cause Flex layout errors?
right result
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#main {
overflow: none;
width: 200px;
background-color: #321;
display: flex;
flex-direction: row;
padding: 10px;
flex-wrap: wrap;
justify-content: flex-start;
}
.el {
width: 50px;
height: 50px;
background-color: red;
margin: 5px;
}
<div id="main">
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
</div>
incorrect result
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#main {
overflow: scroll;
width: 200px;
background-color: #321;
display: flex;
flex-direction: row;
padding: 10px;
flex-wrap: wrap;
justify-content: flex-start;
}
.el {
width: 50px;
height: 50px;
background-color: red;
margin: 5px;
}
<div id="main">
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
</div>
The simple answer is: The scrollbars take up space inside the div. If you force them to render by setting overflow: scroll you take up some of the space inside the flexbox and flex: wrap property causes the content to wrap.
Your main flexbox can handle content of 180px width*.
The content width is also exactly 180px**
This allows no space for the scrollbars and the content ends up wrapping onto the next line.
There is a deprecated property: overflow: overlay which causes the scrollbars to not take up space but it has very limited support and is deprecated so I would not recommend using it.
*Because the width is set to 200px which includes 10px padding on each side. The box-sizing: border-box property makes it so the padding is included in the height and width calculation
**Each el has 60px width including the margin on both sides.
I have a nice little table with 4 elements which contain images.
The images are usually uploaded by users, so I don't have exact control over the image size.
What I am trying to do is create a 2 x 2 layout which resizes to fit the users screen and each box in the layout is given a 16:9 aspect ratio.
This works really well adjusting the window width, but if the user adjusts the height, the elements overflow rather than adjusting in height to fit the users screen.
You can see example here, and if you adjust your screen the horizontal width behavior is what I'm looking for, but adjusting vertically hides the images on smaller window sizes.
https://codepen.io/anon/pen/zaXEOL
.outer-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-height: 70vh;
max-width: 70vw;
overflow: hidden;
}
.holder {
border: 1px solid red;
max-width: 46%;
max-height: 46%;
margin: 1%;
display: flex;
align-items: center;
justify-content: center;
height: 0;
padding-top: 26%;
width: 100%;
position: relative;
}
img {
object-fit: contain;
max-height: 100%;
top: 0;
max-width: 100%;
width: 100%;
height: 100%
<div class="outer-grid">
<div class="holder">
<img src="http://fillmurray.com/200/300"/>
</div>
<div class="holder">
<img src="http://fillmurray.com/300/300"/>
</div>
<div class="holder">
<img src="http://fillmurray.com/300/200"/>
</div>
<div class="holder">
<img src="http://fillmurray.com/250/300"/>
</div>
</div>
The css I am using is fairly simple
.outer-grid {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(2,1fr);
grid-gap: 1rem;
max-height: 70vh;
max-width: 70vw;
overflow: hidden;
}
.holder {
border: 1px solid red;
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 0;
padding-top: 56%;
position: relative;
}
img {
position: absolute;
display: block;
top: 0;
max-height: 100%;
max-width: 100%;
}
First, note that your layout doesn't work at all in Firefox and Edge. This is because the percentage padding trick you are using, when applied in a grid container, doesn't work in all browsers. Here is a detailed explanation: Percentage padding / margin on grid item ignored in Firefox
Second, percentage padding re-sizes images based on their width. That's the whole trick.
From the spec:
§ 8.4 Padding properties: padding-top, padding-right,
padding-bottom, padding-left, and
padding
<percentage>
The percentage is calculated with respect to the width of the
generated box's containing block, even for padding-top and
padding-bottom.
The images can re-size on the horizontal axis because percentage padding is associated with width. They can't re-size on the vertical axis because percentage padding has no association with height.
I have a flexbox-based layout with two panels (top and bottom) occupying 1/3 and 2/3 of the viewport, respectively. (Actually there are more panels, but I've distilled it to the minimal example).
The top panel is also a flex container, because I want its children to flow top to bottom and be vertically centered when there is room. When there is more stuff in top panel than would fit in it, I want it to be scrollable, hence overflow: auto.
The problem: the contents of top shrink to its size, even with flex-shrink: 0, and the scrollbar never pops up.
Observe how the content is shrunk in the following demo, even though it has an explicitly specified height:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.main {
display: flex;
height: 100%;
flex-direction: column;
}
.top {
display: flex;
flex-direction: column;
flex-basis: 33%;
border-bottom: 1px solid #ccc;
overflow: auto;
justify-content: center;
padding: 20px;
}
.bottom {
overflow: auto;
flex-basis: 67%;
}
.content {
height: 500px;
background-color: #eee;
}
<div class="main">
<div class="top">
<div class="content">Content</div>
</div>
<div class="bottom"></div>
</div>
The questions:
How to fix this while preserving the layout requirements? Disabling display: flex for the top panel gives the desired effect in the demo. I could position contents of top in a flexboxless way, but I lose the benefits of flex layout and the automatic vertical centering.
Why does this happen? References to CSS spec would be welcome.
You wrote:
The problem: the contents of top shrink to its size, even with flex-shrink: 0, and the scrollbar never pops up.
Actually, the solution is flex-shrink: 0. So the question becomes, where did you apply it?
It wouldn't work if you applied it to top – a flex item in the primary container with flex-basis: 33% (i.e., height: 33%, in this case) – because the length of top is a percentage. As such, it will shrink / expand naturally as percentage lengths are relative to the parent container.
You need to apply flex-shrink: 0 to .content – a flex item in the nested container with a fixed height (height: 500px / flex-basis: 500px).
So this will work:
.content {
height: 500px;
flex-shrink: 0;
}
or this:
.content {
flex-basis: 500px;
flex-shrink: 0;
}
or, better yet, this:
.content {
flex: 0 0 500px; /* don't grow, don't shrink, stay fixed at 500px */
}
From the spec:
7.2. Components of
Flexibility
Authors are encouraged to control flexibility using the flex shorthand
rather than with its longhand properties directly, as the shorthand
correctly resets any unspecified components to accommodate common
uses.
body {
margin: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
}
.top {
display: flex;
flex-direction: column;
flex-basis: 33%;
border-bottom: 1px solid #ccc;
overflow: auto;
justify-content: center;
padding: 20px;
}
.bottom {
overflow: auto;
flex-basis: 67%;
}
.content {
flex: 0 0 500px;
background-color: #eee;
}
<div class="main">
<div class="top">
<div class="content">Content</div>
</div>
<div class="bottom"></div>
</div>
Then you have a second problem, which is that the upper section of the top element gets cut off and is inaccessible via scroll. This is caused by justify-content: center on the container.
This is a known issue. It is solved by using flex auto margins.
So instead of this:
.top {
display: flex;
flex-direction: column;
flex-basis: 33%;
border-bottom: 1px solid #ccc;
overflow: auto;
/* justify-content: center; <--- REMOVE */
padding: 20px;
}
do this:
.content {
flex: 0 0 500px;
margin: auto 0; /* top & bottom auto margins */
background-color: #eee;
}
body {
margin: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
}
.top {
display: flex;
flex-direction: column;
flex-basis: 33%;
border-bottom: 1px solid #ccc;
overflow: auto;
/* justify-content: center; USE AUTO MARGINS ON FLEX ITEM INSTEAD */
padding: 20px;
}
.bottom {
overflow: auto;
flex-basis: 67%;
}
.content {
flex: 0 0 500px;
margin: auto 0;
background-color: #eee;
}
<div class="main">
<div class="top">
<div class="content">Content</div>
</div>
<div class="bottom"></div>
</div>
Here's a complete explanation:
Can't scroll to top of flex item that is overflowing container
The scrollbar appears when there are enough .content element shrinked to their very minimal height (one line height in this case).
That's not really how things work with flex. height is not strictly respected. If you still want to work with height, you can fix this by setting a min-height to .content according to the minimum height you want for them.
Or you can instead set flex on .content (and get rid of height):
css
flex: 100px 1 0;
Which will set a minimum height (flex-basis) of 100px, flex-grow at 1 so that it takes all the available space, and flex-shrink at 0 so that the element is always at least 100px tall.
How can I properly center the #content without overflowing the #container? margin: auto kinda works, but looks like a hack to me, I would like not to use any margins with CSS Flexbox.
Keep in mind that the #container has position: fixed.
Here's the code demonstrates the issue: [View in JSFiddle ↗]
document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>')
#container {
position: fixed;
background: lightblue;
top: 0; bottom: 0;
left: 0; right: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
#content {
border: 1px solid green;
/* uncomment the hack below to get desired behavior */
/* margin: auto */
}
<div id="container">
<div id="content">
</div>
</div>
Desired behavior you can check with uncommenting margin: auto, question is how to achieve the same result with only flex- properties and without margin: auto.
Without a markup change you can't, as when using align-items: center, it by design overflow in both directions if the content exceed the flex container.
‘center’
The flex item’s margin box is centered in the cross axis within
the line. (If the cross size of the flex line is less than that of the
flex item, it will overflow equally in both directions.)
Also note that auto margins has a special meaning in Flexbox, and it is not a hack, quite the opposite, so in this case, they are the flex based solution to accomplish exactly that.
Update: Here's a later answer of mine, showing a few more solutions, inlcuding the new safe keyword: Flexbox align-items overflow text get cuts off at top
document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>')
#container {
position: fixed;
background: lightblue;
top: 0; bottom: 0;
left: 0; right: 0;
display: flex;
overflow: auto;
}
#content {
border: 1px solid green;
margin: auto;
}
<div id="container">
<div id="content">
</div>
</div>
Try this. I have taken one parent div of content id and give height:100vh to content_wrap class.
document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>')
#container {
position: fixed;
background: lightblue;
top: 0; bottom: 0;
left: 0; right: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
#content {
border: 1px solid green;
/* uncomment the hack below to get desired behavior */
/*margin: auto ;*/
}
.content_wrap {
height: 100vh;
}
<div id="container">
<div class="content_wrap">
<div id="content">
</div>
</div>
</div>
Just replace align-items: center; to align-items: left; in your css
because you are using flex and align-items: center; div is showing from center part so just replace it with left.
document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>')
#container {
position: fixed;
background: lightblue;
top: 0; bottom: 0;
left: 0; right: 0;
display: flex;
/*align-items: center;*/
align-items: left;
justify-content: center;
overflow: auto;
}
#content {
border: 1px solid green;
/* uncomment the hack below to get desired behavior */
/* margin: auto */
}
<div id="container">
<div id="content" class="mx-auto">
</div>
</div>
you can set the position of the #content as absolute and set top: 0; in the style, here0s a working plunkr
I have a div called .side-el which I would like to have in a position: fixed; behavior, but as soon as I apply position fixed the width alternates from the right one. The right width would be the one set by flexbox. How can I achieve this goal?
.container {
-webkit-align-content: flex-start;
align-content: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
* {
box-sizing: border-box;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
}
.main-el {
box-sizing: border-box;
padding:0 2em;
width: 70%;
}
.side-el {
box-sizing: border-box;
width: 30%;
}
<div class="container" style="background-color: blue; height: 100px;">
<div class="main-el">
<div style="background-color: red; height: 1000px;">content</div>
</div>
<div class="side-el" >
<div style="background-color: red; height: 100px;">content</div>
</div>
</div>
Here's a way to do this inspired by bootstrap:
.fixed-top {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
}
This gives your flex-box room to breathe and do it's flex-box thing. If your flex-direction is column, you could use top, left, bottom instead.
This works because when you give an element a fixed position and a left and right of 0 or a top and bottom of 0, the element is stretched to fill the space from left to right, or top to bottom. That in turn allows a flex-box to use the amount of space you would expect without position fixed.
You can't.
As explained by the CSS2.1 spec:
Absolutely positioned boxes are taken out of the normal flow.
And the Flexible Box Layout spec confirms that:
An absolutely-positioned child of a flex container does not
participate in flex layout. However, it does participate in the
reordering step (see order), which has an effect in their
painting order.
(Emphasis mine)
#Daniel , I know this is very late but ... while the accepted answer is correct, I don't feel it's very helpful.
I had the same question (which is how I came across this post), and the solution I think I'll go with is to wrap the position fixed element within the flex element.
Here's a (very ugly) example
Relevant Markup
<aside class="Layout-aside" ng-class="{'isCollapsed': collapsed}" ng-controller="AsideCtrl">
<div class="Layout-aside-inner">
<button ng-click="collapsed = !collapsed">
<span ng-show="collapsed">></span>
<span ng-hide="collapsed"><</span>
</button>
<ul class="Layout-aside-content">
<li ng-repeat="i in items">{{i}}</li>
</ul>
</div>
</aside>
Relevant CSS
.Layout-aside {
order: 0;
min-width: 140px;
width: 140px;
background-color: rgba(0, 255, 0, .4);
transition: width .4s, min-width .4s;
}
.Layout-aside.isCollapsed {
min-width: 25px;
width: 25px;
}
.Layout-aside-inner {
position: fixed;
}
.Layout-aside.isCollapsed .Layout-aside-inner {
width: 25px;
}
.Layout-aside.isCollapsed .Layout-aside-content {
opacity: 0;
}
position:sticky was mentioned by Juozas Rastenis above but without code example.
Here's a minimalist example:
* {
box-sizing: border-box;
}
body {
display: flex;
margin: 0;
}
nav {
width: 20%;
height: 100vh;
top: 0; /* this is required for "sticky" to work */
position: sticky;
background: lightblue;
padding: 1rem;
}
main {
height: 3000px; /* cause scroll */
background: lightpink;
flex-grow: 1;
padding: 1rem;
}
<body>
<nav>
sidebar here
</nav>
<main>
content here
</main>
</body>
You can achieve it with a css alternative position: sticky
It acts great but the only problem is browser support (June 2018):
https://caniuse.com/#feat=css-sticky
Hope it gets better soon.
A far simpler solution would be to use overflow-y:scroll and height: 100vh on the main-el container. This will give the appearance of fixed position to the side-el container without resorting to position: fixed.
You are saying you want position:fixed;-like behavior that plays together with flexbox. As mentioned in the accepted answer, applying this property to an element drops it out of the normal flow, so this isn't really possible.
If what you want is to have a fixed sidebar .side-el and a scrollable content box .main-el as the items of a flex container, here's how you might do this:
Disable scrolling in the flex container's parent; let's assume it's
<body>, as you don't provide div.container's parent. Also, hard-set
it's height to viewport-height (100vh) so that no part of the body's
box remains outside view (imagine the body's box normally extending
beyond your screen to contain the entire document; you don't want
that, if you are to disable the ability to move the viewport via
scrolling).
Set the flex container's (.container) height to that of it's parent.
Selectively re-enable scrolling for the content box (.main-el).
In CSS:
body{
overflow: hidden;
height: 100vh;
}
.container {
display: flex;
height: 100%;
}
.main-el {
overflow-y: auto;
}
You can achieve this without position: fixed; by just adding overflow: auto; and height: 100%; to the flex-item that contains the long content:
.container {
display: flex;
}
.main-el {
padding:0 2em;
width: 70%;
overflow: auto;
height: 100%;
}
.side-el {
width: 30%;
}
<div class="container" style="background-color: blue; height: 300px;">
<div class="main-el">
<div style="background-color: red; height: 1000px;">content</div>
</div>
<div class="side-el" >
<div style="background-color: red; height: 100px;">content</div>
</div>
</div>
I had the same issue, I actually just found a way to have flex-box, a width for the nav bar, and center it while in a fixed position.
nav {
display: flex;
height: 50px;
width: 90%;
left: 5%;
position: fixed;
}
I wanted to be able to have a flex-box nav bar in a fixed position but centered. So what I did was do the left 5% since that's equal to half of the 10% width left over. Try it out, it might help you! :)