In Google Chrome, Safari and IE I am encountering an overflow issue with the flex content.
The issue I am sure is related to the way Chrome doesn't cascade the flex object to it's children.
I believe the correct way to handle the flex objects would be to remove all height/width and max-height/max-width attributes and to use the flex attribute to determine the size limitations. e.g:
display:
flex: 0 0 100px;
However as the flex object is orientated as a column I can't do this.
Additionally this "bug" only occurs when using an img. Replacing the img with a div causes flex to behave as expected.
EXAMPLE (View in Chrome)
span{
background:#4b0;
}
.Flx {
display: flex;
}
.Child {
display: flex;
flex:1;
align-items: center;
justify-content: center;
max-height: 100px;
flex-direction: column;
background-color: #aaa;
}
.Child img {
max-height: 100%;
background-color: #fb4a4a;
}
<div class="Flx">
<div class="Child">
<span>TEXT</span>
<img src="https://i.stack.imgur.com/440u9.png">
</div>
</div>
It appears that this occurs when using flex and percentages on img tags simply changing % to pixels resolved the issue:
max-height: 100px;
span{
background:#4b0;
}
.Flx {
display: flex;
flex:1;
}
.Child {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #aaa;
}
.Wrap{
align-items: center;
justify-content: center;
background:#00d;
}
.Wrap img {
max-height: 100px;
max-width:100%;
background-color: #fb4a4a;
}
<div class="Flx">
<div class="Child">
<span>TEXT</span>
<div class="Flx Wrap">
<img src="https://i.stack.imgur.com/440u9.png">
</div>
</div>
</div>
Related
I'm trying to put 4 images in a flexbox div in a parent flexbox, with total height 100%, without stretching out of the parent flexbox. I've searched a lot, but I didn't found something useful.
I have made a minimum example:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
}
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
background-color: yellowgreen;
}
.imgs {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.img100 {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
<main>
<!--
Weird. Chromium (Chrome & new Edge) usually renders height 100%,
but not height-responsive; sometimes renders scroll bar.
Firefox always renders the scroll bar result.
-->
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
</main>
When opening this example, chromium-based browsers(Chrome, new Edge) usually render height 100%, the desired result, but it is not "height-responsive": the max height of the images remains fixed once the page is fully loaded.
What even worse is, sometimes they give the stretched result with scrollbar; and Firefox always give me the stretched result with scrollbar, which is not what I want.
Try opening this S.O. page in Chromium & Firefox, and run the snippet. The results are different, too.
Chromium (almost always left, rarely right):
Firefox (always):
Any way to achieve what I want? The wrapping div and parent div may be something other than flexbox. I just want the images staying in the div, with width-responsive & height-responsive.
Also, any reason why Chromium browsers' rendering results are not consistent? Is my example missing something?
I know I can use the background image technique, so I can put image in div without changing layout at all. But I want only the image part clickable, so there must be an image element there corresponding to the clickable area.
background-image example:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
}
main {
flex: 1;
display: flex;
flex-direction: column;
background-color: yellowgreen;
}
a {
flex: 1;
background-image: url('https://imgur.com/ruE1EBV.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
border: 5px solid red;
}
<main>
</main>
Edit:
Equal row heights in flex-direction: column is okay when the content inside doesn't contain any images. I think the tricky part is the images. They just stretch...
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
}
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
background-color: yellowgreen;
}
.imgs {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
border: 5px solid red;
}
.img100 {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
<main>
<div class="imgs">
hello
</div>
<div class="imgs">
hello
</div>
<div class="imgs">
hello
</div>
<div class="imgs">
hello
</div>
</main>
Well, I found an easy answer to fix this simple minimum example.
Just add overflow: hidden to .imgs, so images don't grow out of main.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
}
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
background-color: yellowgreen;
}
.imgs {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.img100 {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
<main>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
</main>
Applying this to my actual, much more huge layout did fix my layout.
So all I need to do is to carefully inspect my overflows.
Why Chromium behaves differently: stackoverflow: Why do Chrome and Firefox show different flex layout results?
I'm trying to create "cards" for my team. However, the look weird because the dimensions are different.
My set up looks like this:
<div class="card-wrapper">
<div class="card">Card1</div>
<div class="card">Card2</div>
</div>
My css looks like this now:
.card-wrapper
{
display: flex;
align-items: center;
align-content: center;
flex-direction: row;
}
.card
{
width: 30rem;
background: #000;
align-items: center;
justify-content: center;
}
I can't seem to find a way to make the height the same for all cards. I saw here on stackoverflow that I should:
.card-wrapper {
display:flex;
}
.card {
flex:1;
}
But that does not seem to work. Any suggestions?
Here is a picture of what it currently looks like:
CARDS NOW
i think is because you use
align-items: center
just remove it should have same height for these two card
https://stackblitz.com/edit/typescript-sevm5b
Setting a flex-basis would be helpful. Moreover you don't need the align-items and align-content for this.
* { box-sizing: border-box; }
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
height:20vh
}
.card {
box-shadow: 0 0 4px rgba(0,0,0,0.4);
flex: 0 1 33.33%;
padding: 15px; /* gutter width */
}
<div class="container">
<div class="card"><br></div>
<div class="card"><br></div>
<div class="card"><br><br><br><br><br></div>
</div>
I have an element I'd like to be (cross-axis) centered but also 'grow' to a nominal size even with too-little content, BUT ALSO 'shrink' when the width of the page becomes smaller than 350px wide.
HTML
<div class="parent">
<div class="child">
Some content
</div>
</div>
SCSS
.parent {
display: flex;
flex-direction: column;
align-items: center;
.child {
max-width: 350px;
align-self: stretch;
}
}
Adding align-self: stretch; to .child does the job of making it 350px wide, but it seems to negate the align-items: center; in .parent
Is there a way to do this in CSS that I'm missing? Please note that the element can't just be 350px wide all the time - it must also respond to horizontal page resizing as it does in the example fiddle.
Fiddle: https://jsfiddle.net/1uqpxn8L/1/
UPDATED
I think you should use justify-content to h-align child to center.
Please note, when you apply display: flex property to parent, you should apply flex property to child.
.parent {
background: yellow;
display: flex;
flex-direction: column;
align-items: center;
}
.parent .child {
background: black;
color: white;
text-align: center;
flex: 1 1 auto;
width: 100%;
max-width: 350px;
}
<div class="parent">
<div class="child">
I should be 350px wide
<br> and centered in the yellow
<br> unless the page gets smaller,
<br> in which case I should have
<br> 10px padding on either side.
</div>
</div>
Please see the result here, hope this is what you mean: https://jsfiddle.net/1uqpxn8L/11/
You can do something like this.
HTML
<div class="parent">
<div class="child">
Some content
</div>
</div>
SCSS
.parent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
.child {
width: 350px;
#media(max-width: 350px) {
width: 100%;
}
}
}
.parent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
background-color: red;
}
.child {
width: 350px;
background-color: yellow;
}
#media(max-width: 350px) {
.child { width: 100%; }
}
<div class="parent">
<div class="child">
Some content
</div>
</div>
So whats happening is I'm using a media query to change the width of the child depending on the width of the browser.
You just need to remove the flex-direction property. Then it's working as you expected. But there will be a problem if you want to display children elements as column manner. The shrinking problem occurs with the flex-direction property or flex-flow:column values as I checked.
I notice a difference between Chrome and Edge concerning overflow behavior.
As you can see running the following code, in Chrome this shows only the vertical scrollbar (rightly, in my opinion), while in Edge there are both scrollbars.
Is there a reason for this? How can I make Edge behave in the same way as Chrome does?
Thanks!
.container1 {
display: flex;
flex-flow: column;
align-items: flex-start;
}
.container2 {
display: flex;
flex-flow: column;
align-items: flex-start;
}
.container3 {
max-height: 150px;
overflow: auto;
}
.content {
width: 500px;
height: 200px;
background-color: blue;
}
<div class="container1">
<div class="container2">
<div class="container3">
<div class="content"></div>
</div>
</div>
</div>
Here's what I think is happening:
When the overflow is triggered (because height: 200px on the .content element is taller than the max-height: 150px on the parent), a vertical scrollbar is generated.
This scrollbar actually takes up width. The .content element is set to width: 500px. But once the scrollbar is generated, the width increases to 517px in Chrome. Note that scrollbar width varies among browsers.
Chrome appears to factor in or just ignore the vertical scrollbar width. It refrains from launching a horizontal scrollbar. Edge seems to consider the vertical scrollbar width as an overflow, and therefore launches the horizontal scrollbar.
There could be any number of reasons for this difference in behavior, including a different order of rendering elements and objects.
One thing is clear, if you move the width: 500px from the .content to the parent, the horizontal scroll problem is solved.
.container1 {
display: flex;
flex-flow: column;
align-items: flex-start;
}
.container2 {
display: flex;
flex-flow: column;
align-items: flex-start;
}
.container3 {
max-height: 150px;
overflow: auto;
width: 500px; /* new */
}
.content {
/* width: 500px; */
height: 200px;
background-color: blue;
}
<div class="container1">
<div class="container2">
<div class="container3">
<div class="content"></div>
</div>
</div>
</div>
jsFiddle demo
Try this : overflow-y: auto;
Link : https://www.w3schools.com/cssref/css3_pr_overflow-y.asp
After many attempts I have found a workaround by removing align-items: flex-start and replacing display: flex with display: inline-flex. Here's the new code:
.container1 {
display: inline-flex;
flex-flow: column;
}
.container2 {
display: inline-flex;
flex-flow: column;
}
.container3 {
max-height: 150px;
overflow: auto;
}
.content {
width: 500px;
height: 200px;
background-color: blue;
}
<div class="container1">
<div class="container2">
<div class="container3">
<div class="content"></div>
</div>
</div>
</div>
Hope it will help someone.
Imagine the following layout, where the dots represent the space between the boxes:
[Left box]......[Center box]......[Right box]
When I remove the right box, I like the center box to still be in the center, like so:
[Left box]......[Center box].................
The same goes for if I would remove the left box.
................[Center box].................
Now when the content within the center box gets longer, it will take up as much available space as needed while remaining centered. The left and right box will never shrink and thus when where is no space left the overflow:hidden and text-overflow: ellipsis will come in effect to break the content;
[Left box][Center boxxxxxxxxxxxxx][Right box]
All the above is my ideal situation, but I have no idea how to accomplish this effect. Because when I create a flex structure like so:
.parent {
display : flex; // flex box
justify-content : space-between; // horizontal alignment
align-content : center; // vertical alignment
}
If the left and right box would be exactly the same size, I get the desired effect. However when one of the two is from a different size the centered box is not truly centered anymore.
Is there anyone that can help me?
Update
A justify-self would be nice, this would be ideal:
.leftBox {
justify-self : flex-start;
}
.rightBox {
justify-self : flex-end;
}
If the left and right boxes would be exactly the same size, I get the desired effect. However when one of the two is a different size the centered box is not truly centered anymore. Is there anyone that can help me?
Here's a method using flexbox to center the middle item, regardless of the width of siblings.
Key features:
pure CSS
no absolute positioning
no JS/jQuery
Use nested flex containers and auto margins:
.container {
display: flex;
}
.box {
flex: 1;
display: flex;
justify-content: center;
}
.box:first-child > span { margin-right: auto; }
.box:last-child > span { margin-left: auto; }
/* non-essential */
.box {
align-items: center;
border: 1px solid #ccc;
background-color: lightgreen;
height: 40px;
}
p {
text-align: center;
margin: 5px 0 0 0;
}
<div class="container">
<div class="box"><span>short text</span></div>
<div class="box"><span>centered text</span></div>
<div class="box"><span>loooooooooooooooong text</span></div>
</div>
<p>↑<br>true center</p>
Here's how it works:
The top-level div (.container) is a flex container.
Each child div (.box) is now a flex item.
Each .box item is given flex: 1 in order to distribute container space equally (more details).
Now the items are consuming all space in the row and are equal width.
Make each item a (nested) flex container and add justify-content: center.
Now each span element is a centered flex item.
Use flex auto margins to shift the outer spans left and right.
You could also forgo justify-content and use auto margins exclusively.
But justify-content can work here because auto margins always have priority.
8.1. Aligning with auto
margins
Prior to alignment via justify-content and align-self, any
positive free space is distributed to auto margins in that dimension.
Use three flex items in the container
Set flex: 1 to the first and last ones. This makes them grow equally to fill the available space left by the middle one.
Thus, the middle one will tend to be centered.
However, if the first or last item has a wide content, that flex item will also grow due to the new min-width: auto initial value.
Note Chrome doesn't seem to implement this properly. However, you can set min-width to -webkit-max-content or -webkit-min-content and it will work too.
Only in that case the middle element will be pushed out of the center.
.outer-wrapper {
display: flex;
}
.item {
background: lime;
margin: 5px;
}
.left.inner-wrapper, .right.inner-wrapper {
flex: 1;
display: flex;
min-width: -webkit-min-content; /* Workaround to Chrome bug */
}
.right.inner-wrapper {
justify-content: flex-end;
}
.animate {
animation: anim 5s infinite alternate;
}
#keyframes anim {
from { min-width: 0 }
to { min-width: 100vw; }
}
<div class="outer-wrapper">
<div class="left inner-wrapper">
<div class="item animate">Left</div>
</div>
<div class="center inner-wrapper">
<div class="item">Center</div>
</div>
<div class="right inner-wrapper">
<div class="item">Right</div>
</div>
</div>
<!-- Analogous to above --> <div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">Left</div></div><div class="center inner-wrapper"><div class="item animate">Center</div></div><div class="right inner-wrapper"><div class="item">Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">Left</div></div><div class="center inner-wrapper"><div class="item">Center</div></div><div class="right inner-wrapper"><div class="item animate">Right</div></div></div>
The key is to use flex-basis. Then the solution is simple as:
.parent {
display: flex;
justify-content: space-between;
}
.left, .right {
flex-grow: 1;
flex-basis: 0;
}
CodePen is available here.
Here's an answer that uses grid instead of flexbox. This solution doesn't require extra grandchild elements in the HTML like the accepted answer does. And it works correctly even when the content on one side gets long enough to overflow into the center, unlike the grid answer from 2019.
The one thing this solution doesn't do is show an ellipsis or hide the extra content in the center box, as described in the question.
section {
display: grid;
grid-template-columns: 1fr auto 1fr;
}
section > *:last-child {
white-space: nowrap;
text-align: right;
}
/* not essential; just for demo purposes */
section {
background-color: #eee;
font-family: helvetica, arial;
font-size: 10pt;
padding: 4px;
}
section > * {
border: 1px solid #bbb;
padding: 2px;
}
<section>
<div>left</div>
<div>center</div>
<div>right side is longer</div>
</section>
<section>
<div>left</div>
<div>center</div>
<div>right side is much, much longer</div>
</section>
<section>
<div>left</div>
<div>center</div>
<div>right side is much, much longer, super long in fact</div>
</section>
Instead of defaulting to using flexbox, using grid solves it in 2 lines of CSS without additional markup inside the top level children.
HTML:
<header class="header">
<div class="left">variable content</div>
<div class="middle">variable content</div>
<div class="right">variable content which happens to be very long</div>
</header>
CSS:
.header {
display: grid;
grid-template-columns: [first] 20% auto [last] 20%;
}
.middle {
/* use either */
margin: 0 auto;
/* or */
text-align: center;
}
Flexbox rocks but shouldn't be the answer for everything. In this case grid is clearly the cleanest option.
Even made a codepen for your testing pleasure:
https://codepen.io/anon/pen/mooQOV
You can do this like so:
.bar {
display: flex;
background: #B0BEC5;
}
.l {
width: 50%;
flex-shrink: 1;
display: flex;
}
.l-content {
background: #9C27B0;
}
.m {
flex-shrink: 0;
}
.m-content {
text-align: center;
background: #2196F3;
}
.r {
width: 50%;
flex-shrink: 1;
display: flex;
flex-direction: row-reverse;
}
.r-content {
background: #E91E63;
}
<div class="bar">
<div class="l">
<div class="l-content">This is really long content. More content. So much content.</div>
</div>
<div class="m">
<div class="m-content">This will always be in the center.</div>
</div>
<div class="r">
<div class="r-content">This is short.</div>
</div>
</div>
Here is another way to do it, using display: flex in the parents and childs:
.Layout{
display: flex;
justify-content: center;
}
.Left{
display: flex;
justify-content: flex-start;
width: 100%;
}
.Right{
display: flex;
justify-content: flex-end;
width: 100%;
}
<div class = 'Layout'>
<div class = 'Left'>I'm on the left</div>
<div class = 'Mid'>Centered</div>
<div class = 'Right'>I'm on the right</div>
</div>
A slightly more robust grid solution looks like this:
.container {
overflow: hidden;
border-radius: 2px;
padding: 4px;
background: orange;
display: grid;
grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
}
.item > div {
display: inline-block;
padding: 6px;
border-radius: 2px;
background: teal;
}
.item:last-child > div {
float: right;
}
<div class="container">
<div class="item"><div contenteditable>edit the text to test the layout</div></div>
<div class="item"><div contenteditable>just click me and</div></div>
<div class="item"><div contenteditable>edit</div></div>
</div>
And here you can see it in Codepen: https://codepen.io/benshope2234/pen/qBmZJWN
I wanted the exact result shown in the question, I combined answers from gamliela and Erik Martín Jordán and it works best for me.
.parent {
display: flex;
justify-content: space-between;
}
.left, .right {
flex-grow: 1;
flex-basis: 0;
}
.right {
display: flex;
justify-content: flex-end;
}
you can also use this simple way to reach exact center alignment for middle element :
.container {
display: flex;
justify-content: space-between;
}
.container .sibling {
display: flex;
align-items: center;
height: 50px;
background-color: gray;
}
.container .sibling:first-child {
width: 50%;
display: flex;
justify-content: space-between;
}
.container .sibling:last-child {
justify-content: flex-end;
width: 50%;
box-sizing: border-box;
padding-left: 100px; /* .center's width divided by 2 */
}
.container .sibling:last-child .content {
text-align: right;
}
.container .sibling .center {
height: 100%;
width: 200px;
background-color: lightgreen;
transform: translateX(50%);
}
codepen: https://codepen.io/ErAz7/pen/mdeBKLG
Althought I might be late on this one, all those solutions seems complicated and may not work depending on the cases you're facing.
Very simply, just wrap the component you want to center with position : absolute, while letting the other two with justify-content : space-between, like so :
CSS:
.container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: lightgray;
}
.middle {
position: absolute;
margin-left: auto;
margin-right: auto;
/* You should adapt percentages here if you have a background ; else, left: 0 and right: 0 should do the trick */
left: 40%;
right: 40%;
text-align: center;
}
/* non-essential, copied from #Brian Morearty answer */
.element {
border: 1px solid #ccc;
background-color: lightgreen;
}
p {
margin: 5px;
padding: 5px;
}
<div class="container">
<p class="element">First block</p>
<p class="middle element">Middle block</p>
<p class="element">Third THICC blockkkkkkkkk</p>
</div>
Michael Benjamin has a decent answer but there is no reason it can't / shouldn't be simplified further:
.container {
display: flex;
}
.box {
flex: 1;
display: flex;
justify-content: center;
}
.box:first-child { justify-content: left; }
.box:last-child { justify-content: right; }
And html
<div class="container">
<div class="box">short text</div>
<div class="box">centered tex</div>
<div class="box">loooooooooooooooong text</div>
</div>