This question already has answers here:
Chrome / Safari not filling 100% height of flex parent
(5 answers)
Closed 6 years ago.
I ran into a problem where a ul element is not displayed at 100% height of it's parent in safari. I understand that it's not a new problem and might have been answered here before but I couldn't find an answer that would be close to my specific problem, most of them are about a div not being 100% of the whole page etc.
Here is how it looks in Chrome (this is the result that I want):
And here is how it looks in Safari:
Here is the css:
.container {
display: flex;
flex-flow: row wrap;
}
.header {
min-height: 60px;
border: 1px solid #000;
}
.list {
height: 100%;
display: flex;
justify-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 10px;
background-color: #cecece;
}
Note that the rest of the css in .list class is needed for my application.
Please check out the Jsfiddle
Cheers!
.container {
display: flex;
flex-flow: row wrap;
}
.header {
min-height: 60px;
border: 1px solid #000;
}
.list {
height: 100%;
display: flex;
justify-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
background-color: #cecece;
}
li {
padding: 10px;
background-color: #cecece;
}
<div class="container">
<div class="header">
<ul class="list">
<li>
Donald
</li>
<li>
Hillary
</li>
<li>
Gary
</li>
</ul>
</div>
</div>
Try to add normalize.css to your code (in jsfiddle you can do this just from the css options) then try safari and it should works.
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 4 years ago.
I am building very simple interface, something like Slack. But while doing so, the left navigation makes some padding from the body, however I made padding equals zero and margin.
.app {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
.leftNav {
border: 1px solid black;
height: 100vh;
padding: 20px;
margin: 0;
}
.main {
padding: 10px;
}
<div class="app">
<div class="leftNav">left navigation</div>
<div class="main">main content</div>
</div>
The first rule is all you need. It will reset everything to have 0 margin and padding. Therefore, you could easily change them yourself without any problem
* {
padding: 0;
margin: 0;
}
.app {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
.leftNav {
border: 1px solid black;
height: 100vh;
padding: 20px;
margin: 0;
}
.main {
padding: 10px;
}
<div class="app">
<div class="leftNav">left navigation</div>
<div class="main">main content</div>
</div>
Here's a working example :)
I don't know what you expected but i see these css as default. I mean the space is not app's padding or margin, it's the margin between <body> and <html> tag.
body {
display: block;
margin: 8px;
}
This question already has answers here:
What's the difference between align-content and align-items?
(15 answers)
CSS Flexbox: difference between align-items and align-content [duplicate]
(2 answers)
Closed 5 years ago.
Whilst trying to answer this question, I was trying to come up with a flex solution. The closest I could get was this:
.container {
height: 500px;
width: 500px;
background-color: red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:space-between; /* puts spacing between left and right column */
}
.headerTitle {
width:100%;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width: 249px;
height: 200px;
background-color: yellow;
}
.rightSideDiv {
width: 249px;
height: 200px;
border: 4px solid green;
box-sizing:border-box; /* need this otherwise border will take an extra 8px width in some browsers */
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
However, I couldn't make the 2 lower boxes start flush to the top heading. Is there a way of doing this using flex? I tried align-items and align-self but that didn't seem to do anything.
I also tried adding a pseudo element to the container with flex-grow:1; but it didn't grow in the required manner.
It would be interesting to see if flex can handle this as I'm still trying to learn the intricacies of it
Just add align-content: flex-start to the .container div:
.container {
height: 500px;
width: 500px;
background-color: red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:space-between; /* puts spacing between left and right column */
align-content: flex-start;
}
.headerTitle {
width:100%;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width: 249px;
height: 200px;
background-color: yellow;
}
.rightSideDiv {
width: 249px;
height: 200px;
border: 4px solid green;
box-sizing:border-box; /* need this otherwise border will take an extra 8px width in some browsers */
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
I'd like scrolling content underneath a variable-height element. Is this a CSS blind spot or am I just not thinking of an obvious solution?
Codepen with my best effort so far, but it only works in Chrome and Firefox:
http://codepen.io/anon/pen/BKpxGP
HTML:
<div class="sidebar">
<header>
<h1>Header content that I would like to remain on the screen even when the main area is scrolled down.</h1>
<p>I want to avoid specifying a height or top padding/margin value, as the content may grow or shrink at times.</p>
<p>This code seems to work in Chrome and Firefox but not in Safari. I haven't tested IE yet.</p>
<p><strong>Challenge:</strong> Can we make it cross-browser?</p>
</header>
<main>
<ul>
<li>Elephant</li>
<li>Giraffe</li>
<li>Otter</li>
<li>Nine-banded armadillo</li>
<li>Cat</li>
</ul>
</main>
</div>
CSS:
.sidebar {
width: 400px;
height: 700px;
border: 10px solid #808080;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.sidebar header {
background-color: #87ceeb;
border-bottom: 10px solid #00f;
padding: 0 1em;
}
.sidebar header h1 {
font-size: 1.2rem;
}
.sidebar main {
overflow-y: auto;
-webkit-flex-basis: auto;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.sidebar main li {
height: 400px;
border-right: 10px solid #ffc0cb;
margin: 10px;
padding: 10px;
}
it much more easy than you thought i think.
The css code that you are searching for is:
.example {
position: fixed;
}
On my website you see the same result in the header section. It stays on the top, even if you are scrolling down. :)
I think this is what you want http://codepen.io/dirtysmith/pen/jqyKBO
css
.sidebar header {
background-color: #87ceeb;
border-bottom: 10px solid #00f;
padding: 0 1em;
position: fixed;
width: 368px;
}
added a width to match the container, and position fixed.
I tried this today, and Safari works fine. I guess its Flex support was lagging but it's fixed now. Thank you for the suggestions everyone!
I have a horizontal flex box (i.e. flex-direction: row, i.e. side-by-side) with a few items. Each item can be a single line of text, or can have multiple lines. I want to vertically-align the contents of each flex item.
If each item had a transparent background, I could easily use align-items: center. However, I want each item to be stretched vertically, because I want to set a background (or maybe borders, or maybe it is a clickable region) to the entire available height.
So far, I know:
Stretching: align-items: stretch
Aligning: align-items: center
Stretching and aligning: ???
Demo available at http://codepen.io/denilsonsa/pen/bVBQNa
ul {
display: flex;
flex-direction: row;
}
ul.first {
align-items: stretch;
}
ul.second {
align-items: center;
}
ul > li {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 5em;
text-align: center;
}
ul > li:nth-child(2) {
background: #CFC;
}
/* Visual styles, just ignore. */
html, body { font-family: sans-serif; font-size: 25px; }
ul, li { list-style: none; margin: 0; padding: 0; }
ul { background: #CCF; width: 25em; }
<ul class="first">
<li>Sample</li>
<li><span>span</span></li>
<li><span>multiple</span> <span>span</span></li>
<li>text <span>span</span></li>
<li>multi<br>line</li>
</ul>
<hr>
<ul class="second">
<li>Sample</li>
<li><span>span</span></li>
<li><span>multiple</span> <span>span</span></li>
<li>text <span>span</span></li>
<li>multi<br>line</li>
</ul>
Similar questions:
Question 14012030 and question 23442692 and question 27729619 and question 25311541 ask essentially the same thing, but they either have a single element or plain text as child of each flex item. As soon as we have mixed content, possibly with multiple elements, those solutions do not work.
Question 19026884 is unrelated, the issue there was the wrong markup.
Unfortunately, it is impossible to achieve the desired effect while using the exact markup posted in the question.
The solution involves:
Setting display: flex; on <li>.
Wrapping the <li> contents into another element.
This is required because <li> is now a flex container, so we need another element to prevent the actual contents from becoming flex items.
In this solution, I introduced a <div> element, but it could have been other element.
Now that <li> is a flex container and it contains only a single child, we can use align-items and/or justify-content to align this new and only child.
The DOM tree looks like this:
<ul> flex-parent, direction=row
├ <li> flex-item && flex-parent && background && JavaScript clickable area
│ └ <div> flex-item as a single transparent element
│ ├ Actual contents
│ └ Actual contents
├ …
Note: The solution in this answer uses 2 nested flex boxes. The solution by Michael_B uses 3 nested flex boxes, because it has the added challenge of expanding the <a> element to fill the entire <li>. Which one is preferred depends on each case. If I could, I would accept both answers.
/* New code: this is the solution. */
ul > li {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Old code below. */
ul {
display: flex;
flex-direction: row;
align-items: stretch;
}
ul > li {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 5em;
text-align: center;
}
ul > li:nth-child(2) {
background: #CFC;
}
/* Visual styles, just ignore. */
html, body { font-family: sans-serif; font-size: 25px; }
ul, li { list-style: none; margin: 0; padding: 0; }
ul { background: #CCF; width: 25em; }
button:focus + ul {
font-size: 14px;
width: auto;
}
<button>Click here to set <code>width: auto</code> and reduce the font size.</button>
<!-- New code: there is a single <div> between each <li> and their contents. -->
<ul>
<li><div>Sample</div></li>
<li><div><span>span</span></div></li>
<li><div><span>multiple</span> <span>span</span></div></li>
<li><div>text <span>span</span></div></li>
<li><div>multi<br>line</div></li>
</ul>
I want each item to be stretched vertically, because I want to set a
background (or maybe borders, or maybe it is a clickable region) to
the entire available height.
You can achieve this layout without any changes to your HTML structure. There's no need for additional containers.
You already have a primary flex container and a group of flex items. Simply make those flex items into nested flex containers. That will enable you to align the content with flex properties.
(Since you mentioned that you may need clickable regions, I switched from li to a elements.)
nav {
display: flex;
background: #CCF;
width: 25em;
}
nav > a {
flex: auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
text-align: center;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
nav > a:nth-child(2) {
background: #CFC;
}
html, body {
font-family: sans-serif;
font-size: 25px;
}
<nav>
Sample
<span>span</span>
<span>multiple</span> <span>span</span>
text <span>span</span>
multi<br>line
</nav>
revised codepen
Note that content placed directly inside a flex container is wrapped in an anonymous flex item:
From the spec:
4. Flex Items
Each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex
container is wrapped in an anonymous flex item.
So, because the text is automatically wrapped in flex items, you can keep the full height of each item (align-items: stretch from the primary container) and vertically center the content (align-items: center from the nested containers).
Make the li flex-containers with flex-direction:column. I think that's what you are after.
html,
body {
font-family: sans-serif;
font-size: 25px;
}
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
ul {
background: #CCF;
width: 25em;
display: flex;
flex-direction: row;
}
ul.first {
align-items: stretch;
}
ul > li {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 5em;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*outline: 1px dotted #444;*/
}
ul > li:nth-child(2) {
background: #CFC;
}
<ul class="first">
<li>Sample</li>
<li><span>span</span>
</li>
<li><span>multiple</span> <span>span</span>
</li>
<li>text <span>span</span>
</li>
<li>multi
<br>line</li>
</ul>
Flex-child items can also be flex-parent items.
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-family: sans-serif;
font-size: 25px;
}
body {
display: flex;
flex-flow: column nowrap;
background-color: #333;
overflow: hidden;
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.List {
padding: 0;
margin: 0;
background: #CCF;
width: 25em;
list-style: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
.ListItem {
flex-basis: 5em;
display: flex;
flex-flow: row wrap;
text-align: center;
align-items: center;
}
.ListItem:nth-child(2) {
background: #CFC;
}
.ListItem__content {
width: 100%;
}
<ul class="List">
<li class="ListItem">
<span class="ListItem__content">Sample</span>
</li>
<li class="ListItem">
<span class="ListItem__content">span</span>
</li>
<li class="ListItem">
<span class="ListItem__content">multiple <br> span</span>
</li>
<li class="ListItem">
<span class="ListItem__content">span</span>
</li>
<li class="ListItem">
<span class="ListItem__content">multi<br>line</span></li>
</ul>
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed 6 years ago.
When using flex box in default row direction, the container height grows to contain all the flex items, even if it is absolutely positioned.
#container {
position: absolute;
display: flex;
flex-wrap: wrap;
}
#container > div {
flex: 0 0 200px;
height: 200px;
}
See http://codepen.io/tamlyn/pen/dPjLoN/?editors=110
However if the flex direction is changed to column, the container collapses to the width of a single flex item, even if the items wrap onto the next column.
#container {
position: absolute;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
#container > div {
flex: 0 0 200px;
width: 200px;
}
See http://codepen.io/tamlyn/pen/rarbeN?editors=110
How can I make the container contain all flex items in column mode?
I've actually found a CSS-only solution to this but it isn't the most perfect thing in the world. Here it is: http://codepen.io/anon/pen/vEPBKK
The trick here is to create a visibility: collapsed container. In flex, visibility: collapsed objects take themselves out of the normal flex flow but retain their dimensions for the purpose of layout. This widens the flex container to the desired width but leaves the flex items unaffected. There are a few caveats, however:
This requires a bit of fiddling. As you can see, the magic <div> is a set width but it uses :nth-child to determine how many boxes are before it. If your actual design breaks at more or less than 3 rows, you'll have to adjust this and you'll most certainly have to adjust the width of the object.
Because of a rendering bug, this does not work in IE. Luckily, IE's incorrect implementation does exactly what you wanted in the first place without any changes so all you have to do is give IE it's own stylesheet with some conditional statements and shoot the div.magic some good old display: none.
HTML
<div id="container">
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="magic"></div>
</div>
CSS
#container {
position: absolute;
display: flex;
flex-direction: column;
flex-wrap: wrap;
border: 1px solid #f00;
height: 650px;
padding: 1px;
}
#container div.fb {
border: 1px solid #555;
flex: 0 0 200px;
background-color: #ccc;
width: 200px;
margin: 1px;
height: 200px;
}
#container > div.magic {
height: 0;
margin: 0;
padding: 0;
visibility: collapsed;
}
#container > div.magic:nth-child(5),
#container > div.magic:nth-child(6),
#container > div.magic:nth-child(7) {
width: 408px;
}
#container > div.magic:nth-child(8),
#container > div.magic:nth-child(9),
#container > div.magic:nth-child(10) {
width: 612px;
}
#container > div.magic:nth-child(11),
#container > div.magic:nth-child(12),
#container > div.magic:nth-child(13) {
width: 816px;
}
I think this is the CSS you're looking for:
#container {
display: flex;
flex-flow: row wrap;
border: 1px solid #f00;
padding: 1px;
}
#container > * {
border: 1px solid #555;
background-color: #ccc;
height: 200px;
width: 200px;
margin: 1px;
}
The "Container" will always the the width of it's container, in this case the page, but now the boxes will adjust within it properly.
Let me know if I misunderstood your question.
Update
I've been playing with what you're asking for for several days now, and it really seems like it's not possible to do what you're asking... at least not in the direction that you're asking.
The container wants to be the maximum width possible. Unless you force the container to be the exact width, at which point it wont be the full width, but it wont flex with the flexing content either.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
border: 1px solid #f00;
}
.flex-item {
background-color: #ccc;
padding: 5px;
width: 200px;
height: 150px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
border: 1px solid #555;
}
<div id="container" class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
The first try I do not understand what you mean
as reference material you can see this tutorial
https://css-tricks.com/snippets/css/a-guide-to-flexbox/