I have a flexbox and in it, I have an image and text. For some reason, there is a big area of the flexbox where I can't place content in. It is like there is padding there and it won't let it go past it. I'm not too sure why the content can't go in this area.
The part highlighted in yellow is where I can't place anything. If it goes over this area, it will just go to the next line.
What I want it for it to stretch across because right now, the text looks too close together. how can I achieve this?
/*Header for picture, and description*/
#display {
padding-top: 2em;
border: solid .125em black;
display: flex;
flex-flow: wrap;
background-color: white;
opacity: 0.9;
}
#display > * {
flex: 1 1 5%;
padding: 1em;
}
article{
margin-right:20em;
}
article h1{
font-size: 2em;
text-align: center;
}
article p{
padding-top: 2em;
}
<section id="display">
<figure id="headshot">
<img src="images/GM05.png" alt="headshot"/>
</figure>
<article>
<h1>Name Goes Here</h1>
<p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
</article>
</section>
Removing the margin-right in the article tag fixes the issue, but now they aren't aligned correctly.
You must note that you have set a margin on the article.
The problem might be here:
article{
margin-right:20em;
}
This pushes your article 20em's away from the right end of your display. Just remove the margin and run the code.
Related
Below is a <div> element with it's position property set to sticky:
<div style="position: sticky;"> </div>.
When I insert two sticky <div> elements in a page, they both stick to the top of the page, and stick, in that sense that sticky elements are working, however, they stick at the exact same spot and cover each other up. In my head I imagined that they would both get to the top of the page, when the user scrolls the page, and stick, but I thought they would stack, but as I stated, they don't, one just sits under the other.
Here is an extremely simplified version of my current project. I want the two blocks to stick, one right above the the other.
<html>
<body>
<div style="display: block; position: sticky; width: 100% height: 25px; background: #555">
DIV ONE #1
</div>
<div style="display: block; position: sticky; width: 100% height: 25px; background: #555">
DIV TWO #2
</div>
</body>
</html>
So my question is, how can I add two sticky <div> elements, to the same HTML document, and have one <div> stick to the top of the page when the user scrolls, and the other <div> stick to the bottom of the first <div>, rather than also sticking to the top of the page and covering the that stuck first, up?
To ensure that what I am saying is understood, I have added an interactive example.
Below, the example will show you what is happening within my project — Div Alpha is being covered by Div Beta, and I want Div Beta to stick to the bottom of Div Alpha, so that it doesn't block it.
<!DOCTYPE html>
<html>
<head>
<style>
.div-alpha {
display: block;
text-align: center;
position: sticky;
top: 0;
width: 200px;
height: 200px;
font-size: 30px;
border: 5px solid #FF20B0;
background-color: #000000;
color: #FF20B0;
}
.div-beta {
display: block;
text-align: center;
position: sticky;
top: 0;
width: 200px;
height: 200px;
font-size: 30px;
border: 5px solid #80E000;
background-color: #002040;
color: #80E000;
}
h1 {
color: #401480;
}
p.lorem-ipsum {
width: 350px;
font-size: 18px;
color: #001064
}
p.p-alpha {
font-size: 14px;
color: #FF20B0;
}
p.p-beta {
font-size: 14px;
color: #80E000;
}
</style>
</head>
<body>
<h1>Testing Sticky Divs</h1>
---
<br>
<div class="div-alpha">
DIV ALPHA
<p class="p-alpha">The other div covers me up, and I don't want to be covered up!</p>
</div>
<br>
<div class="div-beta">
DIV BETA
<p class="p-beta"> I don't want to cover the other div, but I do anyway :..(</p>
</div>
<!-- The Code Below is silly filler code that has been inserted so that the page will scroll up & down, which is required for observing the behavior of elements that have their "position" property set to "sticky" (i.e. "position: sticky;") -->
<br>
<br>
<br>
<br>
<h2>Lorem Ipsum Text</h2>
---
<p class="lorem-ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi ipsum faucibus vitae aliquet nec. Tempus quam pellentesque nec nam aliquam. Purus non enim praesent elementum facilisis leo
vel fringilla est. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Eu consequat ac felis donec et odio pellentesque. In ante metus dictum at tempor commodo. Amet massa vitae tortor condimentum. Sapien eget mi proin sed libero enim sed faucibus
turpis. Tortor at risus viverra adipiscing at. Leo urna molestie at elementum eu facilisis sed. Pharetra diam sit amet nisl suscipit adipiscing. Cursus sit amet dictum sit amet justo donec. Euismod nisi porta lorem mollis. Massa ultricies mi quis
hendrerit. Lorem ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ornare arcu odio ut sem nulla pharetra. Faucibus et molestie
ac feugiat sed lectus. Commodo quis imperdiet massa tincidunt nunc. At augue eget arcu dictum varius duis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Convallis
posuere morbi leo urna molestie at. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Tristique senectus et netus et malesuada fames ac. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ut aliquam purus sit amet luctus
venenatis lectus. Posuere urna nec tincidunt praesent. Aenean et tortor at risus viverra adipiscing at in. Justo eget magna fermentum iaculis eu. Placerat vestibulum lectus mauris ultrices eros in. Pharetra vel turpis nunc eget lorem dolor. Blandit
turpis cursus in hac habitasse platea dictumst quisque. Nisi porta lorem mollis aliquam ut porttitor leo. Lectus nulla at volutpat diam ut venenatis. Proin nibh nisl condimentum id venenatis. Arcu felis bibendum ut tristique et egestas quis ipsum.
Feugiat nibh sed pulvinar proin gravida. Odio facilisis mauris sit amet. Gravida in fermentum et sollicitudin ac. Magna etiam tempor orci eu lobortis elementum nibh. Donec ultrices tincidunt arcu non sodales. Consequat ac felis donec et odio. Amet
mattis vulputate enim nulla aliquet porttitor lacus luctus. Sagittis purus sit amet volutpat consequat mauris nunc. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Diam sit amet nisl suscipit. Viverra tellus in hac habitasse platea
dictumst vestibulum. Praesent tristique magna sit amet purus gravida.
</p>
</body>
</html>
So I figured it out:
Getting 2 Divs to Stick, w/o Covering One Another
There are two ways you can configure the Sticky <div> elements so that they don't cover each other when you scroll down the page.
#1
The first way is to set the property top of the lower div, to be the same combined height as the top div. The key word here is COMBINED which means: The padding and borders need to be added to the height to get an accurate value for top, otherwise the divs will still partially cover one another.
#2
The most simple, straight forward method, would be to create a parent div that is sticky, and then place the two original divs inside of it. Remove the position: sticky; property from the original two <div> elements, so that position sill be set to its default value. Its important that when doing this, you make sure that only the parent container has its position property set to sticky (i.e. position: sticky), or else you'll get undesired results. Below is the questions code rewritten using solution #2.
<!DOCTYPE html>
<html>
<head>
<style>
.div-alpha {
display: block;
text-align: center;
width: 200px;
height: 200px;
font-size: 30px;
text-decoration: underline;
border: 5px solid #08C8FF;
background-color: #900040;
color: #08C8FF;
}
.div-beta {
display: block;
text-align: center;
width: 200px;
height: 200px;
font-size: 30px;
text-decoration: underline;
border: 5px solid #EE1054;
background-color: #00307A;
color: #EE1054;
}
.div-gamma {
display: block;
text-align: center;
position: sticky;
top: 0;
}
p {
width: 350px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Testing Sticky Divs</h1>
---
<br>
<div class="div-gamma">
<div class="div-alpha">DIV ALPHA</div>
<div class="div-beta">DIV BETA</div>
</div>
<br>
<br>
<br>
<br>
<h3>Lorem Ipsum Text</h3>
---
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Mi ipsum faucibus vitae aliquet nec. Tempus quam pellentesque nec nam aliquam. Purus non enim
praesent elementum facilisis leo vel fringilla est. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Eu
consequat ac felis donec et odio pellentesque. In ante metus dictum at tempor commodo. Amet massa vitae tortor
condimentum. Sapien eget mi proin sed libero enim sed faucibus turpis. Tortor at risus viverra adipiscing at.
Leo urna molestie at elementum eu facilisis sed. Pharetra diam sit amet nisl suscipit adipiscing. Cursus sit
amet dictum sit amet justo donec. Euismod nisi porta lorem mollis. Massa ultricies mi quis hendrerit. Lorem
ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui.
Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ornare arcu odio ut sem nulla pharetra. Faucibus et
molestie ac feugiat sed lectus. Commodo quis imperdiet massa tincidunt nunc. At augue eget arcu dictum varius
duis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Et molestie ac feugiat sed lectus
vestibulum mattis ullamcorper. Convallis posuere morbi leo urna molestie at. Enim sit amet venenatis urna cursus
eget nunc scelerisque viverra. Tristique senectus et netus et malesuada fames ac. Faucibus ornare suspendisse
sed nisi lacus sed viverra tellus. Ut aliquam purus sit amet luctus venenatis lectus. Posuere urna nec tincidunt
praesent. Aenean et tortor at risus viverra adipiscing at in. Justo eget magna fermentum iaculis eu. Placerat
vestibulum lectus mauris ultrices eros in.
Pharetra vel turpis nunc eget lorem dolor. Blandit turpis cursus in hac habitasse platea dictumst quisque. Nisi
porta lorem mollis aliquam ut porttitor leo. Lectus nulla at volutpat diam ut venenatis. Proin nibh nisl
condimentum id venenatis. Arcu felis bibendum ut tristique et egestas quis ipsum. Feugiat nibh sed pulvinar
proin gravida. Odio facilisis mauris sit amet. Gravida in fermentum et sollicitudin ac. Magna etiam tempor orci
eu lobortis elementum nibh. Donec ultrices tincidunt arcu non sodales. Consequat ac felis donec et odio. Amet
mattis vulputate enim nulla aliquet porttitor lacus luctus. Sagittis purus sit amet volutpat consequat mauris
nunc. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Diam sit amet nisl suscipit. Viverra
tellus in hac habitasse platea dictumst vestibulum. Praesent tristique magna sit amet purus gravida.
</p>
</body>
</html>
Here is an example
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
<div class="sticky">
<p> This is your sticky box </p>
</div>
<div>
<p>This is your other divs and properties </p>
</div>
This is what I do to make a navbar that has a functioning responsive mobile drop-down menu. Sounds like you already figured it out, but I thought id give ya some feedback. At the surface, the paradigm, is to put all objects that are supposed to stick in a single sticky container, however; implementing it is much harder than it sounds. Good Luck!
<!DOCTYPE HTML>
<html lang='us-en'>
<head>
<style type='text/css'>
.nav {
position: sticky;
position: -webkit-sticky;
top: 0;
left: 0;
display: grid;
grid-template-columns: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.nav-bar {
background-color: #000;
display: block;
width: 100%;
}
.nav-bar a {
display: inline-block;
font-size: 26px);
text-decoration: none;
margin: 16px 4px 0 12px;
}
/*!!! ~~~ ICONS ~~~ */
#home {
display: block;
float: left;
padding: 12px;
font-size: 38px !important;
}
#bars {
display: none;
float: right;
padding: 4px;
font-size: 38px !important;
}
/*! ~~~ Drop & Drop-Items ~~~ */
.nav-drop {
background-color: #000;
display: none;
width: 100%;
}
.nav-drop button {
display: block;
width: 54%;
margin: 12px 23%;
border: 1px solid #0FF;
padding: 1px;
}
</style>
</head>
<!-- BODY'S MARKUP -->
<body>
<div class="nav">
<div class="nav-bar">
<i id="home" class="fa fa-home" aria-hidden="true" onclick="go2('home')"> </i>
HOME |
ABOUT |
CONTACT |
FORUM
<i id="bars" class="fa fa-bars" aria-hidden="true" onclick="dropMenu()"></i>
</div>
<div id="nav-drop" class="nav-drop">
<button onclick="go2('about')">ABOUT</button>
<button onclick="go2('contact')">CONTACT</button>
<button onclick="go2('forum')">FORUM</button>
</div>
</div>
</body>
</html>
I have a p element with a large body of text (multi-line) and I want it to fill a parent div automatically: the text needs to should fill the parent with as few lines as possible while keeping the text easy to read. The best way to do this, as far as I can see, is to have it change font-size.
I've tried multiple "fit text" js plugins but I cant get any of them to work for multi-line paragraphs.
I think this would be possible though the use of several CSS media queries But I want to know if there is a better way to automate this for applications.
#content-grid {
margin: 27px 0px 50px 0px;
display: grid;
grid-template-columns: repeat(4, 25%);
grid-auto-rows: 1fr;
grid-row-gap: 0px;
grid-column-gap: 0px;
color: #D9D9D9;
}
#content-grid::before {
content: '';
width: 0;
padding-bottom: 100%;
grid-row: 1 / 1;
grid-column: 1 / 1;
}
.item>p {
margin: 35px;
/*overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;*/
color: black;
line-height: 1.5em;
font-size: .85em;
}
#media (max-width:950px) {
#content-grid {
grid-template-columns: 50% 50%;
}
}
<div id="content-grid">
<div class="item" style="background-color:#e6e6e6;">
<h3>Theres Gonna Be a Heading Here, Too</h3>
<p style="object-fit: cover;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis vitae ligula in convallis. Aenean vitae lorem vitae nunc tristique maximus. Sed semper mauris leo, non congue felis ullamcorper non. Maecenas leo sapien, faucibus consequat ultricies
eu, mollis vitae leo. Morbi quis tortor eu purus mattis viverra. Pellentesque gravida lectus turpis, iaculis ultricies nibh vestibulum volutpat. Donec placerat augue lorem, quis porta enim vehicula sed. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Mauris id consectetur magna. Aliquam interdum nisl elit, sit amet ultrices erat scelerisque nec. Aenean at felis lobortis, ultrices purus nec, iaculis tellus. Curabitur diam dolor, egestas sed iaculis
cursus, vestibulum sed neque. Cras quis eleifend eros. Vestibulum est arcu, auctor et nisi vitae, malesuada maximus massa. Nam ut sodales nunc. Phasellus mauris sem, consequat sit amet enim ac, placerat consectetur arcu. Cras pellentesque arcu nec
est finibus lobortis. Nunc et ligula libero. Nullam eget dolor non tellus commodo vulputate non at tortor. Nullam porta id ligula in placerat.
</p>
</div>
<div>
</div>
<div>
<p>
There are several more divs, but they have very little text so the problem does not apply to them
</p>
</div>
</div>
Use word-break:break-all; property for the desired element, It will wrap the given element inside the parent div.
eg:
item>p{word-break:break-all;}
I'm trying to float text around an image, but for some reason, the text won't go in the right place.
Here is what I want it to look like. I was able to create this in an editor by itself, but when I add it to my page, it breaks it and doesn't work.
I'm having trouble getting it to look like my other example. They have the same code for that part. Need help figuring out how to get it close to the first example.
Mine Now:
section{
display:flex;
border-style:solid;
background-color:azure;
}
img {
padding-top: 5em;
padding-right:2em;
}
p{
float:right;
}
h1{
text-align:center;
}
<section>
<img src="images/GM05.png" alt="headshot">
<article>
<h1>Name Goes Here.</h1>
<p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
</article>
</section>
There are no floats involved. Put your image in another wrapper. Then apply flex property to that wrapper. Adjust the last value (flex-basis) to the width you want that "column" to be.
aside {
flex: 0 0 40%; /* flex-grow: 0; flex-shrink: 0; flex-basis: 40%; */
padding-top: 64px;
}
You can center the image in that space with margin.
aside img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto; /* auto on the sides centers the item */
}
section {
display: flex;
border-style: solid;
background-color: azure;
}
aside {
flex: 0 0 40%;
padding-top: 64px;
}
aside img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
h1 {
text-align: center;
}
<section>
<aside>
<img src="https://picsum.photos/200/300" alt="headshot">
</aside>
<article>
<h1>Name Goes Here.</h1>
<p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae
risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet
sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
</article>
</section>
If i understand correctly, you just wanna to display this image on the center.
So, change padding-top: 5em; to margin: auto;
Best regards,
Brhaka
The issue I'm having is that I'm trying to change the layout between min-width:975px max-width: 1280px. I want to move the image and the text around.
In the picture, you can see the text is too much to the left. I want to move it closer to the image. This is inside of a flexbox. I tried to use padding, but nothing changed.
How would I move the text closer to the image?
/*Header for picture, and description*/
#display {
padding-top: 2em;
border: solid .125em black;
display: flex;
flex-flow: wrap;
background-color: white;
opacity: 0.9;
}
#display > * {
flex: 1 1 5%;
padding: 1em;
}
article h1{
font-size: 2em;
}
article p{
padding-top: 2em;
}
#media screen and (min-width:975px max-width: 1280px){
article{
}
}
<section id="display">
<figure id="headshot">
<img src="images/GM05.png" alt="headshot"/>
</figure>
<article>
<h1>Name Goes Here</h1>
<p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
</article>
</section>
Why do you set flex: 1 1 5%; to the flex-child ?
It is the shorthand for
flex-grow:1;
flex-shrink:1;
flex-basis:5%;
while flex-basis is
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
flex-basis
This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property" (which was temporarily done by the main-size keyword until deprecated). The content keyword means "size it based on the item's content" - this keyword isn't well supported yet, so it's hard to test and harder to know what its brethren max-content, min-content, and fit-content do.
If you set flex:1; to article, it should work fine, else, use the values you need (flex: X X X;), read the tutorials to go further.
/*Header for picture, and description*/
#display {
padding-top: 2em;
border: solid .125em black;
display: flex;
flex-flow: wrap;
background-color: white;
opacity: 0.9;
}
#display>* {
padding: 1em;
}
article {
flex: 1;
}
article h1 {
font-size: 2em;
}
article p {
padding-top: 2em;
}
#media screen and (min-width:975px max-width: 1280px) {
article {}
}
<section id="display">
<figure id="headshot">
<img src="images/GM05.png" alt="headshot" />
</figure>
<article>
<h1>Name Goes Here</h1>
<p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae
risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet
sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
</article>
</section>
Here's a simple flex based blog layout:
<div class='Page'>
<div class='Container'>
<div class='Content'>
<h1>Hello</h1>
<p>Cras ac mauris purus. Phasellus at ligula condimentum, pretium nisi eget, aliquet enim. Sed at massa velit. Cras ac mi dolor. Nullam id felis sit amet neque tempus sodales. In ultricies et turpis in faucibus. Morbi fringilla metus pellentesque, varius enim a, dapibus ex. Sed aliquet urna nisi, eu fermentum diam pretium quis. Curabitur vel cursus turpis. Sed a varius leo, in viverra arcu. Donec porttitor, dolor vel laoreet iaculis, magna arcu tempus ex, at porttitor tellus nunc ultricies felis. Quisque congue sapien in quam tempor, non dapibus felis dignissim. Pellentesque ex eros, dignissim eget tortor non, aliquet ullamcorper nisi. Sed interdum non eros quis fringilla. Morbi condimentum tellus at blandit dignissim. Aenean metus elit, interdum et suscipit quis, ullamcorper sit amet risus.</p>
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sapien magna, lacinia sit amet quam sed, dignissim tincidunt neque. Duis sed sapien hendrerit, consectetur neque quis, tempor nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent fringilla enim odio, sit amet venenatis ex commodo in. Pellentesque in enim in libero vulputate fermentum. Suspendisse elementum felis neque, in rhoncus diam hendrerit eget. Cras tempor porta bibendum. Fusce eget tellus a enim euismod lobortis in vitae nibh. Duis ornare turpis non ex consectetur, sit amet malesuada elit feugiat.</pre>
</div>
</div>
</div>
With this CSS
.Page {
border: 1px solid blue;
}
.Container {
display: flex;
flex-direction: column;
align-items: center;
}
.Content {
border: 1px solid red;
padding: 10px;
max-width: 700px;
min-width: 0;
}
pre {
overflow: auto;
background: #f2f2f2;
border: 1px solid #ccc;
border-radius: 4px;
padding: 20px;
}
Working example: https://codepen.io/anon/pen/xdeyrY
When the browser width is >700px, the red Container is centered and the pre code block has an overflow scrollbar. But as soon as you resize the browser < 700px, the pre code block stretches the container to the full 700px and the content gets cut off.
Why is the width of the container not limited by the browser/screen width in this case?
If you remove align-items: center; everything works as expected. If you set white-space: normal on pre, it also works as expected. But neither of those is an option.
The only workaround I came up with is to add this media query:
#media only screen and (max-width: 700px) {
.Container {
align-items: initial;
}
}
This does the trick, but seems a bit like a hack. Is this some flexbox bug/edge case, or am I missing some min-width: 0 trick here? It seems like using flex + align-items:center + max-width + pre just doesn't work well together..
In addition to Michael_B's answer, if you need the flex column direction for i.e. multiple .Content elements, you can also simply set width: 100% on the .Content.
To adjust the width to your padding/border you can either use box-sizing: border-box;, which I did, or CSS Calc (width: calc(100% - 22px);)
Also, for the reason Michael gave, I removed the min-width: 0 as it has no effect
Updated codepen
Stack snippet
.Page {
border: 1px solid blue;
}
.Container {
display: flex;
flex-direction: column;
align-items: center;
}
.Content {
border: 1px solid red;
padding: 10px;
max-width: 700px;
width: 100%;
box-sizing: border-box;
}
pre {
overflow: auto;
background: #f2f2f2;
border: 1px solid #ccc;
border-radius: 4px;
padding: 20px;
}
<div class='Page'>
<div class='Container'>
<div class='Content'>
<h1>Hello</h1>
<p>Cras ac mauris purus. Phasellus at ligula condimentum, pretium nisi eget, aliquet enim. Sed at massa velit. Cras ac mi dolor. Nullam id felis sit amet neque tempus sodales. In ultricies et turpis in faucibus. Morbi fringilla metus pellentesque, varius enim a, dapibus ex. Sed aliquet urna nisi, eu fermentum diam pretium quis. Curabitur vel cursus turpis. Sed a varius leo, in viverra arcu. Donec porttitor, dolor vel laoreet iaculis, magna arcu tempus ex, at porttitor tellus nunc ultricies felis. Quisque congue sapien in quam tempor, non dapibus felis dignissim. Pellentesque ex eros, dignissim eget tortor non, aliquet ullamcorper nisi. Sed interdum non eros quis fringilla. Morbi condimentum tellus at blandit dignissim. Aenean metus elit, interdum et suscipit quis, ullamcorper sit amet risus.</p>
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sapien magna, lacinia sit amet quam sed, dignissim tincidunt neque. Duis sed sapien hendrerit, consectetur neque quis, tempor nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent fringilla enim odio, sit amet venenatis ex commodo in. Pellentesque in enim in libero vulputate fermentum. Suspendisse elementum felis neque, in rhoncus diam hendrerit eget. Cras tempor porta bibendum. Fusce eget tellus a enim euismod lobortis in vitae nibh. Duis ornare turpis non ex consectetur, sit amet malesuada elit feugiat.</pre>
</div>
</div>
</div>
It is indeed a min-width: 0 problem.
It's applied in your code, but the set-up is not quite right.
The min-width and min-height overrides work only in the direction of the main axis.
This means that the min-width: 0 override works only in flex-direction: row.
Similarly, the min-height: 0 fix applies only in flex-direction: column.
Your flex container is flex-direction: column. Your flex item has min-width: 0. Therefore, the override is having no effect.
Switch your container to row-direction. Since you're not applying flex properties to the content of the flex item, the switch won't change anything, except allow your <pre> tag to shrink.
You will also need to switch align-items: center to justify-content: center.
revised demo
More details here: Why doesn't flex item shrink past content size?