I'm trying to display a list of items in a single column. The list is long so I want it to scroll if they all don't fit.
On all browsers right and left margin not appearing
On chrome: The issue is that if the window becomes smaller, the top items start to disappear and hide as the window shrinks. Also first item top margin missing.
On IE11 sometimes the rows doesn't take 100% but shrinks to the content width. If I resize the IE window it displays properly.
Edit:
After removing justify-content: center; it solved the vertical issue on chrome, but suddenly no bottom margin appears on IE11
This is the CSS
body {
height: 100%;
width: 100%;
margin: 0pt;
padding: 0pt;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #e6e6fa;
}
div.list {
max-height: 80%;
width: 60%;
margin: 0pt;
padding: 0pt;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
overflow-y: auto;
flex: 0 1 auto;
background-color: red;
justify-content: center;
align-items: center;
}
div.list .row {
width: 100%;
margin: 4pt 12pt 4pt 12pt;
padding: 0pt;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
flex: 0 0 auto;
box-shadow: 0 0 4px #000000;
background-color: #ffffff;
}
div.list .row .content {
width: 100%;
margin: 0pt;
padding: 0pt;
flex: 0 0 auto;
direction: rtl;
text-align: right;
}
This is the HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="list">
<div class="row">
<div class="content" style="color:#2b8ACA">title</div>
<div class="content">description</div>
<div class="content" style="color:#BABABA">date</div>
</div>
</div>
</body>
</html>
Can anyone explain what I'm doing wrong?
Thanks.
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 4 months ago.
CSS white-space: nowrap; not respecting max-width
Reproduce:
Run the below code
White-space is causing this issue where it increase the width of the right container and igroring the max-width of parent container
Current result: Width of right excees the max- width: 1680px;
Expected Result : Width should not exceed max-width: 1680px;
<!DOCTYPE html>
<html>
<head>
<title>test application</title>
<style>
body {
background-color: red;
}
div{
box-sizing: border-box;
}
.container {
align-items: stretch;
max-width: 1680px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: flex-start;
}
.container .left {
background-color: blue;
display: flex;
width: 18em;
padding: 3em 2em 3em 2em;
position: relative;
color: white;
flex-direction: column;
margin-right: 2em;
min-height: calc(100vh - 150px);
flex-grow: 0;
flex-shrink: 0;
}
.container .right {
background-color: green;
width: 100%;
padding: 0em 3em 3em 3em;
flex: 1
}
.b2 {
width: auto;
white-space: nowrap;
overflow: hidden;
}
.abc {
display: inline-flex;
/* width: 1640px; */
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left </div>
<div class="right">
<div class="b2">
<div class="abc">
rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
</div>
<div class="abc">
rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
</div>
</div>
</div>
</div>
</body>
</html>
The white-spacing relies on white-spaces to break the text apart. Since you don't have any, the text will not break onto the new line.
There are multiple ways to deal with this.
For example you could set overflow-wrap: anywhere and word-wrap: normal to the .abc selector. But this will also break whole-words apart ignoring standard syllable-based word wrapping.
You could also cut out the excess by forcefully setting overflow: hidden, white-space: nowrap together with a max-width and maybe text-overflow: ellipsis. But this will actually hide the information.
Caveat: The overflow-wrap: anywhere is unfortunately not supported by Safari.
It depends on what you want to achieve.
Example with 'overflow-wrap: anywhere'
<!DOCTYPE html>
<html>
<head>
<title>test application</title>
<style>
body {
background-color: red;
}
div {
box-sizing: border-box;
}
.container {
align-items: stretch;
max-width: 1680px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: flex-start;
}
.container .left {
background-color: blue;
display: flex;
width: 18em;
padding: 3em 2em 3em 2em;
position: relative;
color: white;
flex-direction: column;
margin-right: 2em;
min-height: calc(100vh - 150px);
flex-grow: 0;
flex-shrink: 0;
}
.container .right {
background-color: green;
width: 100%;
padding: 0em 3em 3em 3em;
flex: 1
}
.b2 {
width: auto;
white-space: nowrap;
overflow: hidden;
}
.abc {
display: inline-flex;
overflow-wrap: anywhere;
white-space: normal;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left </div>
<div class="right">
<div class="b2">
<div class="abc">
rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
</div>
<div class="abc">
rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
</div>
</div>
</div>
</div>
</body>
</html>
Example with 'text-overflow: ellipsis'
<!DOCTYPE html>
<html>
<head>
<title>test application</title>
<style>
body {
background-color: red;
}
div {
box-sizing: border-box;
}
.container {
align-items: stretch;
max-width: 1680px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: flex-start;
}
.container .left {
background-color: blue;
display: flex;
width: 18em;
padding: 3em 2em 3em 2em;
position: relative;
color: white;
flex-direction: column;
margin-right: 2em;
min-height: calc(100vh - 150px);
flex-grow: 0;
flex-shrink: 0;
}
.container .right {
background-color: green;
width: 100%;
padding: 0em 3em 3em 3em;
flex: 1
}
.b2 {
width: auto;
white-space: nowrap;
overflow: hidden;
}
.abc {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 100ch;
/* 100 characters max */
max-width: 1000px;
/* 1000px max */
}
</style>
</head>
<body>
<div class="container">
<div class="left">left </div>
<div class="right">
<div class="b2">
<div class="abc">
rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
</div>
<div class="abc">
rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
</div>
</div>
</div>
</div>
</body>
</html>
I've been all over this site for some solutions to my issue but nothing has seemed to work.
Referring to This JSFiddle I'm trying to get internal drop shadows surrounding the top and bottom of the dark grey div. I've tried changing from flex to relative positions, z-index, order, various overflow options and drop shadow filters.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="Bespoke">
</head>
<body>
<div class="grid">
<!-------- Row 1 ---------->
<header>
</header>
<!-------- Row 2 ---------->
<article>
</article>
<!-------- Row 3 ---------->
<blank>
</blank>
<!-------- Row 4 ---------->
<subtitle>
</subtitle>
<!-------- Row 5 ---------->
<blank2 class>
</blank2>
<!-------- Row 5 ---------->
<footer>
</footer>
</div>
</body>
</html>
.grid {
display: grid;
grid-template-columns:auto;
grid-gap: 0em;
width: 100vw;
height: 10vw;
}
}
#media all and (max-width: 100vw) {
aside,
article {
}
}
body {
margin: 0 auto;
max-width: 100vw;
background-image: url("https://cff2.earth.com/uploads/2019/08/15135811/Microplastics-are-raining-down-on-the-Rocky-Mountains-730x410.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
color: white;
}
header {
display: flex;
align-items: center;
justify-content: center;
height: 15vh;
text-align: center;
background: rgba(175, 165, 255, 0);
}
article {
display: flex;
align-items: center;
justify-content: center;
height: 30vh;
text-align: center;
background: rgba(0, 0, 0, 0);
}
blank {
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
height: 15vh;
text-align: center;
background: rgba(205, 225, 105, 0);
box-shadow(10px 10px 30px #000000);
z-index: 10;
}
subtitle {
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
text-align: center;
background-color: #1e1e1e;
font-size: max(7vw, 20px);
box-shadow(-10px -10px 30px #000000);
z-index: 9;
}
blank2 {
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
text-align: center;
background-color: #fffff7;
z-index: 8;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
align-items: center;
justify-content: center;
height: 7vh;
text-align: center;
background-color: #fffff7;
}
Your issue is that you had the syntax of the box-shadow CSS wrong
You had it like: box-shadow(10px 10px 30px #000000);
Where it needs to be: box-shadow: 10px 10px 30px #000000;
If CSS runs into properties it doesn't understand, then it just silently ignores it and considers it an invalid property. It doesn't throw an error of any kind.
In Chrome's dev tools, this is what an invalid property looks like: There is a warning sign that indicates that it's an unknown property name.
The syntax highlighting on the jsfiddle also shows the issue as it isn't showing the correct colors
Change box-shadow(-10px -10px 30px #000000); -> box-shadow: -10px -10px 30px #000000;
I'm a React beginnerCan you explain me how to place a .herogroup (composed by h1, p and a button) in the middle and 20px far away from the bottom of a background (belonging to .Hero)?
<div>
<div className="Hero">
<div className="HeroGroup">
<h1>ABC</h1>
<p>ABC</p>
<Link to="ABC">ABC</Link>
</div>
</div>
CSS
.Hero {
height: 1920px;
background-image: url('../images/abc.jpg');
background-size: cover;}
.HeroGroup{
max-width: 500px;
margin: 0 auto;
padding: 150px 50px;
text-align: center;}
I have used css flex. Which is more convenient to achieve your case than using position absolute.
.Hero {
height: 1920px;
background-image: url('../images/abc.jpg');
background-size: cover;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.HeroGroup{
max-width: 500px;
margin: 0 auto;
padding: 20px 0px;
display: flex;
/* flex-wrap: wrap; */
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
<div>
<div class="Hero">
<div class="HeroGroup">
<h1>ABC</h1>
<p>ABC</p>
<Link to="ABC">ABC</Link>
</div>
</div>
In your .HeroGroup class do this
.HeroGroup {
max-width: 500px;
padding: 150px 50px;
margin: 0 auto;
text-align: center;
position: absolute;
bottom: -20px;
}
I noticed an interesting difference between Firefox and Chrome in the following flexbox layout:
html,
body {
height: 100%;
min-height: 100%;
margin: 0px;
display: flex;
flex-direction: column;
}
header {
border: 1px solid #D3D3D3;
flex: 0 1 auto;
}
.row {
display: flex;
flex-direction: column;
flex: 1 0 auto;
flex-wrap: wrap;
}
.tab1 {
flex: 1 0 48%;
position: relative;
margin: 0.5em;
background-color: orange;
}
.tab2 {
flex: 1 0 48%;
position: relative;
margin: 0.5em;
background-color: blue;
}
.tab3 {
flex: 1 0 48%;
position: relative;
margin: 0.5em;
border: 1px solid lightgray;
background-color: green;
}
.tab4 {
flex: 1 0 48%;
position: relative;
margin: 0.5em;
border: 1px solid lightgray;
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
</header>
<div class="row">
<div class="tab1"></div>
<div class="tab2"></div>
<div class="tab3"></div>
<div class="tab4"></div>
</div>
</body>
</html>
When I run this in Chrome 43, I get horizontal rectangles. However, in Firefox 39 this results in vertical rectangles. The important part is the use of flex-direction: column; and flex-wrap: wrap; in the element with class .row.
In order to get a similar layout, adding height: 100%; gives vertical rectangles in Chrome. However, this creates a scrollbar in both browsers due to the (empty) header element. Does anyone know what is the reason of this difference in the layout and what is the best way to fix it?
UPDATE:
By the way, I'm interested in understanding why there is a difference in Chrome and Firefox, not so much in obtaining a layout with vertical rectangles. Maybe there is something buggy in the use of flex-direction: column or maybe I'm doing something wrong. In any case, it would be helpful to know that.
There is a bug in Flex that causes strange behavior when you don't define width's and height's also min-height is known to cause a lot of problem's.
Here is a repository of some known issues and how to workaround them.
Side note I believe Safari requires -webkit- vendor prefix for flex rules
Here is a possible workaround give's vertical box's in both FF and Chrome
html,
body {
height:100%;
width:100%;
margin: 0px;
display: flex;
flex-direction: row;
}
header {
border: 1px solid #D3D3D3;
flex: 0 1 auto;
}
.row {
display: flex;
flex-direction: row;
flex: 1 0 auto;
flex-wrap: wrap;
}
.tab1 {
flex: 1 0 20%;
position: relative;
margin: 0.5em;
background-color: orange;
}
.tab2 {
flex: 1 0 20%;
position: relative;
margin: 0.5em;
background-color: blue;
}
.tab3 {
flex: 1 0 20%;
position: relative;
margin: 0.5em;
border: 1px solid lightgray;
background-color: green;
}
.tab4 {
flex: 1 0 20%;
position: relative;
margin: 0.5em;
border: 1px solid lightgray;
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
</header>
<div class="row">
<div class="tab1"></div>
<div class="tab2"></div>
<div class="tab3"></div>
<div class="tab4"></div>
</div>
</body>
</html>
Given the following HTML:
<div class="outer">
<div>
<div class="inner">A</div>
</div>
</div>
<div class="outer">
<div class="inner">B</div>
</div>
and the following CSS (prefix free):
.outer {
display: box;
box-orient: vertical;
height: 100px;
width: 100px;
background: red;
margin: 10px;
}
.inner {
height: 50px;
margin-top: 10px;
background: green;
}
Here is a CodePen.
A is wrapped in a <div> so it's margin gets ignored.
Q: How can I achieve B's behavior for A (margin) with the flex box model?
Note: The div wrappers can go multiple levels deep
Targeting: latest Chrome/Safari/iOS
Thank you very much for your help!
Edit: Thanks to #JoséCabo I came up with this:
.outer {
display: flex;
flex-direction: column;
height: 100px;
width: 100px;
background: red;
margin: 10px;
}
.inner {
height: 50px;
margin-top: 10px;
background: green;
}
CodePen
Chrome:
Safari:
Unfortunately it doesn't work in Safari as mentioned by #cimmanon, so I still need some help.
What you're looking at actually has nothing to do with Flexbox, but what's called margin collapse
.outer div {
border: 1px solid;
}
The addition of the border has prevented the margin from collapsing. Rather than relying on margins, I would recommend placing a padding on the parent container:
.outer {
padding-top: 10px;
}
Example:
.wrapper {
background: #eef;
border: 1px solid darkgray;
}
.container {
display: flex;
flex-wrap: wrap;
margin: -1em;
}
.item {
flex-grow: 1;
margin: 1em;
border: 1px solid black;
padding: 1em;
min-width: 6em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class='container'>
<div class='item'>item</div>
<div class='item'>item</div>
<div class='item'>item</div>
<div class='item'>item</div>
<div class='item'>item</div>
<div class='item'>item</div>
</div>
</div>
</body>
</html>
Now, to cover all of your prefixes, you need something like this:
.outer {
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100px;
width: 100px;
background: red;
margin: 10px;
}
Finally I came up with the right solution (for my specific problem).
.outer {
display: flex;
flex-direction: column;
height: 100px;
width: 100px;
background: red;
margin: 10px;
}
.inner {
height: 50px;
margin-top: 10px;
background: green;
display: inline-block;
width: 100%;
}
CodePen
I'm using display: inline-block on .inner to disable margin collapsing and then compensate for the lost width with width: 100%.
All the credit goes to cimmanon for pointing me in the right "margin collapse" direction