I'm working on a simple layout using flexbox that works in Chrome, but in Safari, the heights of elements seem off.
There is a minimal example fiddle here: https://jsfiddle.net/6h84h2w6/3/
HTML:
<div id="container">
<div id="menu">
<div class="menu-item">
Menu item 1
</div>
<div class="menu-item">
Menu item 2
</div>
<div class="menu-item">
Menu item 3
</div>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="antimenu">
</div>
</div>
CSS:
#container {
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
}
#content {
display: flex;
flex-direction: column;
flex-basis: 68%;
flex-grow: 1;
width: 100%;
max-width: 600px;
}
#menu {
display: flex;
flex-basis: 16%;
min-width: 10rem;
flex-shrink: 0;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
}
#antimenu {
display: flex;
visibility: hidden;
flex-basis: 16%;
min-width: 10rem;
flex-shrink: 0;
height: 0;
}
.menu-item {
display: flex;
margin: 5px;
}
In Chrome this looks ok:
… but Safari gets confused:
This vertical layout is used when a page gets too narrow. A slightly bigger example using a media query can be found here (the antimenu is just used for making sure that content ends up in the centre): https://jsfiddle.net/6h84h2w6/2/
What is wrong here? I guess it's my CSS that is wrong since it's such a small example…
Related
I have 2 divs, yellow and red. The yellow div has a variable content.
I want to achieve the following:
When the yellow div grows, the red div should be pushed down, but never below the page edge. The red div should always be fully visible.
If the yellow div becomes too large, it should be scrollable, so the red div is still visible.
The yellow div should not take up more space than its content. When the yellow div does not take up much space, the red div should not be pushed down. It should be displayed right below the yellow div.
How can I achieve this with flexbox?
I succeeded in making the yellow box scrollable, and keeping the red box always visible. However, my solution displays the yellow box always at the bottom of the page, which is not what I want.
.page {
height: 120px;
width: 300px;
display: flex;
flex-direction: column;
border: 4px solid gray;
padding: 10px;
}
.yellow {
flex: 1 1 0;
overflow: auto;
min-height: 0;
border: 4px solid #F7B64C;
padding: 10px;
margin-bottom: 10px;
}
.red {
border: 4px solid #F05467;
padding: 10px;
}
Example 1: yellow div has a lot of content and correctly becomes scrollable:
<div class="page">
<div class="yellow">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="red"></div>
</div>
<br/>
<br/> Example 2: yellow div has little content, incorrectly pushes red div to the bottom:
<div class="page">
<div class="yellow">
Lorem ipsum dolor sit amet.
</div>
<div class="red"></div>
</div>
How can I make the yellow box take up only the space it actually needs, and not take up the remaining space?
It seems that the default behavior of flex box might achieve the desired result without additional settings.
In the following example, try click the buttons to adjust the amount of content in yellow and red.
An additional spacer div after red can be added to further enforce the layout, but it seems to be unnecessary in this use case.
.spacer {flex: 1}
<div class="spacer"></div>
Example:
const btns = document.querySelectorAll("button");
const yellow = document.querySelector(".yellow");
const red = document.querySelector(".red");
btns.forEach((btn, i) =>
btn.addEventListener("click", () => {
yellow.innerText = i === 0 ? "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." : i === 1 ? "Lorem ipsum dolor sit amet." : yellow.innerText;
red.innerText = i === 2 ? "Duis aute irure dolor in reprehenderit in velit eu fugiat nulla pariatur." : i === 3 ? "" : red.innerText;
})
)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
}
.control {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 300px;
margin: 10px 10px;
gap: 10px;
}
button {
padding: 6px;
}
section {
height: 180px;
width: 300px;
display: flex;
flex-direction: column;
border: 4px solid gray;
padding: 10px;
margin: 3px 10px;
}
.yellow {
overflow: auto;
min-height: 0;
border: 4px solid #f7b64c;
padding: 10px;
margin-bottom: 10px;
}
.red {
border: 4px solid #f05467;
padding: 10px;
}
/* .spacer {
flex: 1;
} */
<div class="control">
<button>Example 1: Lots of content in yellow</button>
<button>Example 2: Little content in yellow</button>
<button>Example 3: Some content in red</button>
<button>Example 4: No content in red</button>
</div>
<br />
<section>
<div class="yellow">Try click buttons to see examples</div>
<div class="red"></div>
<!-- <div class="spacer"></div> -->
</section>
I am having a difficult time getting a flex-box (direction = "column") to wrap rather than overflow a parent container.
As seen in the code below (or linked codepen), the general scheme is thus: the flexbox's parent is set to flex-grow = "1", within another flexbox set to flex = "column" (height = "100%), within a flex-box set to height = "200px" (the height at which I want to wrap at, rather than overflow). Any help is greatly appreciated.
https://codepen.io/mvolny/pen/ZErbwGy
(purple box pushing green box outside of parent rather than wrapping and staying within the red box)
.about-me-flex {
display: flex;
width: 100%;
height: 200px;
border: 1px solid pink;
}
.intro-and-skills-flex {
display: flex;
flex-direction: column;
width: 60%;
border: 1px solid red;
height: 100%;
}
.about-me-intro {
border: 1px solid grey;
}
.skills {
flex-grow: 1;
border: solid green 1px;
}
.listed-skills-flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
border: 1px solid purple;
list-style-type: square;
padding-left: 20px;
margin-left: 0;
}
<div class="about-me-flex">
<div class="intro-and-skills-flex">
<div class="about-me-intro">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="skills">
<div>Things I know</div>
<ul class="listed-skills-flex">
<li>Javascript</li>
<li>HTML/CSS</li>
<li>Node.js</li>
<li>React</li>
<li>Redux</li>
<li>PostgreSQL</li>
<li>MongoDB</li>
</ul>
</div>
</div>
<div class="profile-image-container">
<!-- <img src="./assets/scooter-muppet.png" alt="" /> -->
</div>
</div>
if you want the whole .listed-skills-flex to wrap you should put flex-wrap: wrap; directly to its parent;
.intro-and-skills-flex {
...
flex-wrap: wrap;
}
and if you want only the content of listed-skills-flex to warp just add height or max-height to listed-skills-flex
.listed-skills-flex {
height: 100px;
}
or
.listed-skills-flex {
max-height: 100px;
}
Here is below a simplified version of what I have.
The goal is to fit the image into its parent. In other words, the image size must not exceed the parent size. max-width and max-height don't work because the parent (#media-insert) don't have a known size. What is currently happening, is that the parent increases its size to fit the image.
This is really easy solve by setting the image as the background of the parent instead of inserting it into the parent. However, I don't want to do that, because I want to be able to replace the image by a video.
Also, I don't want to modify the HTML. Keep in mind that this is a simplified version, in the real world there is more going on in the layout.
Thanks
* {
box-sizing: border-box;
}
main {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#media-description {
/* the description must take the minimum possible space (flex-grow: 0) to fit everything (flex-shrink: 0) */
flex-shrink: 0;
flex-grow: 0;
}
#media-wrapper {
/* the wrapper should shrink/grow to fit the remaining space */
flex-shrink: 1;
flex-grow: 1;
}
#media-wrapper #media-insert {
width: 100%;
height: 100%;
/* center the image */
display: flex;
align-items: center;
justify-content: center;
}
#media-wrapper #media-insert img {
display: block;
/* image must fit inside the parent (doesn't work) */
max-width: 100%;
max-height: 100%;
}
/***** debug *****/
main {
border: 5px solid red;
/* simulate phone screen */
width: 350px;
height: 500px;
}
#media-wrapper {
border: 5px solid green;
}
#media-insert {
border: 5px solid lightgreen;
}
#media-description {
border: 5px solid blue;
}
<main>
<div id="media-wrapper">
<div id="media-insert">
<img src="https://picsum.photos/200/300" alt="lorem ipsum">
</div>
</div>
<div id="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
Edit:
Here is how I want it to look like (but without setting the image as the background of the parent):
* {
box-sizing: border-box;
}
#examples {
display: flex;
}
#examples > div {
margin: 1em
}
main {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.media-description {
/* the description must take the minimum possible space (flex-grow: 0) to fit everything (flex-shrink: 0) */
flex-shrink: 0;
flex-grow: 0;
}
.media-wrapper {
/* the wrapper should shrink/grow to fit the remaining space */
flex-shrink: 1;
flex-grow: 1;
}
.media-wrapper .media-insert {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
}
#img-example-1 {
background-image: url("https://picsum.photos/200/300");
}
#img-example-2 {
background-image: url("https://picsum.photos/100/100");
}
/***** debug *****/
main {
border: 5px solid red;
/* simulate phone screen */
width: 350px;
height: 500px;
}
.media-wrapper {
border: 5px solid green;
}
.media-insert {
border: 5px solid lightgreen;
}
.media-description {
border: 5px solid blue;
}
<div id="examples">
<div>
<p>
Image too big<br>
-> scale down
</p>
<main>
<div class="media-wrapper">
<div class="media-insert" id="img-example-1"></div>
</div>
<div class="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
</div>
<div>
<p>
Image smaller than parent<br>
-> image keeps its size
</p>
<main>
<div class="media-wrapper">
<div class="media-insert" id="img-example-2"></div>
</div>
<div class="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
</div>
</div>
You could position the image with absolute position, set it to 100% width and height and use the object-fit property to style it. It's like the background-size: cover:
* {
box-sizing: border-box;
}
main {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#media-description {
/* the description must take the minimum possible space (flex-grow: 0) to fit everything (flex-shrink: 0) */
flex-shrink: 0;
flex-grow: 0;
}
#media-wrapper {
/* the wrapper should shrink/grow to fit the remaining space */
flex-shrink: 1;
flex-grow: 1;
}
#media-wrapper #media-insert {
width: 100%;
height: 100%;
/* center the image */
display: flex;
align-items: center;
justify-content: center;
background:red;
position:relative;
}
#media-wrapper #media-insert img {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
object-fit:cover;
}
/***** debug *****/
main {
border: 5px solid red;
/* simulate phone screen */
width: 350px;
height: 500px;
}
#media-wrapper {
border: 5px solid green;
}
#media-insert {
border: 5px solid lightgreen;
}
#media-description {
border: 5px solid blue;
}
<main>
<div id="media-wrapper">
<div id="media-insert">
<img src="https://picsum.photos/200/300" alt="lorem ipsum">
</div>
</div>
<div id="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
Got it! I modified passatgt's answer (thanks for showing me how object-fit works).
The modification I made:
All the image is visible: object-fit: contain instead of object-fit: cover
The image keeps its size if it already fits in the parent (max-width and max-height instead of width and height).
Added an example to show that it works with image bigger than parent and smaller than parent.
* {
box-sizing: border-box;
}
#examples {
display: flex;
}
#examples > div {
margin: 1em
}
main {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.media-description {
/* the description must take the minimum possible space (flex-grow: 0) to fit everything (flex-shrink: 0) */
flex-shrink: 0;
flex-grow: 0;
}
.media-wrapper {
/* the wrapper should shrink/grow to fit the remaining space */
flex-shrink: 1;
flex-grow: 1;
}
.media-wrapper .media-insert {
position: relative;
width: 100%;
height: 100%;
}
.media-wrapper .media-insert img {
position:absolute;
left: 50%;
top: 50%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transform: translate(-50%, -50%);
}
/***** debug *****/
main {
border: 5px solid red;
/* simulate phone screen */
width: 350px;
height: 500px;
}
.media-wrapper {
border: 5px solid green;
}
.media-insert {
border: 5px solid lightgreen;
}
.media-description {
border: 5px solid blue;
}
<div id="examples">
<div>
<p>
Image too big<br>
-> scale down
</p>
<main>
<div class="media-wrapper">
<div class="media-insert">
<img src="https://picsum.photos/200/300" alt="lorem ipsum">
</div>
</div>
<div class="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
</div>
<div>
<p>
Image smaller than parent<br>
-> image keeps its size
</p>
<main>
<div class="media-wrapper">
<div class="media-insert">
<img src="https://picsum.photos/100/100" alt="lorem ipsum">
</div>
</div>
<div class="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
</div>
</div>
change the max-width and max-height to min
#media-wrapper #media-insert img {
display: block;
min-width: 100%;
min-width: 100%;
}
Edit: or are you trying just to increase the width to fit the parent?
I've got a design I need to complete with 2 columns, the content inside the columns needs to line up with the container that's used across the site.
The issue I've got is on the design the second column has a background colour that stretches to the edge of the viewport.
If you look at the JSfiddle/code below I have a working solution if you uncomment the .col::after code at the bottom, however I was hoping there might be a cleaner more simple way of achieving this?
Cheers
https://jsfiddle.net/qksmpfrv/
html,
body {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 80px;
}
.grid {
display: flex;
flex-wrap: wrap;
}
.col {
padding: 80px;
position: relative;
width: 50%;
}
.col:last-child {
background: grey;
}
/* .col:last-child::after {
background: grey;
content: '';
position: absolute;
height: 100%;
left: 100%;
top: 0;
width: 500px;
} */
<div class="container">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="grid">
<div class="col">
1
</div>
<div class="col">
2
</div>
</div>
</div>
How about moving the grid outside the max-width container and then adding a max-width inside the columns:
Advantages of this approach over an after
will always be the width of the screen no matter how wide the monitor is - the after approach will only cover screens up to 2400px wide (I know not many screens are this big, but sometimes you might want to display your site at a marketing event and those screens may be)
you are not creating an extra 500px box off screen for smaller resolutions (so less rendering time for things like mobile and tablet)
You don't have to use a hack on every column you want to stretch to the edge
It's just nicer and easier to maintain
html,
body {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 80px;
}
.grid {
display: flex;
flex-wrap: wrap;
}
.col {
position: relative;
width: 50%;
}
.inner {
max-width: 700px;
padding: 80px; /* move padding to inner */
}
.col:first-child .inner {
margin-left: auto; /* push this to the right if no wide enough to fill col */
}
.col:last-child {
background: grey;
}
<div class="container">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- move grid outside container -->
<div class="grid">
<div class="col">
<div class="inner">
<!-- add inner containers with max-width of 700px (half of your container) -->
1
</div>
</div>
<div class="col">
<div class="inner">
2
</div>
</div>
</div>
I need to create a css 3 column div layout that is 100% of the width of the screen, where the left column is 100px, the right column is 100px and the middle column fills the remainder of the width. Text in the middle div must not overflow.
I've had a look at other questions and haven't been able to come up with this solution. How would I do this?
Edit:
This is what I was working on. I mistakenly thought it was too trivial to need further explanation:
<div style="width: 100%; ">
<div style="display: block; height: 20px; float: left;width:100px">
Test1
</div>
<div style="display: block; margin-left: auto; margin-right: auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div style="display: block; height: 20px;float:left;width:100px">
Test3
</div>
</div>
Very easy.
Use css calc() and say that the middle is calc(100% - 200px) and just add overflow: hidden;
UPDATE:
If this does not work you can make main div with full width of 100vw or 100%.
And make it position:relative; padding: 0 100px; and there goes the main div and for those on sides:
For left use:
position:absolute; top:0; left:0; width: 100px;
For right use:
position: absolute; top:0; right:0; width: 100px;
<div class="thing">
<div>thing</div>
<div>thing</div>
<div>thing</div>
</div>
div.thing {
display: grid;
grid-template-columns: 100px auto 100px;
justify-items: center;
}
div.thing:nth-child(1) {
grid-column: 1;
}
div.thing:nth-child(2) {
grid-column: 2;
}
div.thing:nth-child(3) {
grid-column: 3;
}
https://codepen.io/fencepencil/pen/qojXQQ