It seems that Google Chrome does not take into account vertical scrollbars of an Flex item first time Flexbox container is rendered.
This is how it look like after page just loaded:
This is how it looks like after changing width of a container a little.
IE10, IE11 and FF does take into account the scrollbars.
Here is the codepen.
HTML:
<div class="subj">
<div>
Lorem ipsum dolor sit amet, ...
</div>
<div>
Lorem ipsuxm dolor sit amet, ...
</div>
<div>
Lorem ipsum dolor sit amet, ...
Lorem ipsum dolor sit amet, ...
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.subj {
width: 400px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.subj > :nth-child(1) {
background: #f88;
flex: 0 0 auto;
}
.subj > :nth-child(2) {
background: #8f8;
flex: 0 0 auto;
overflow: auto;
white-space: nowrap;
position: relative;
border: 5px solid #f8f;
}
.subj > :nth-child(3) {
background: #88f;
flex: 1 1 auto;
overflow: auto;
}
Is there a way to tell Chrome to respect scrollbars?
I don't know what is casing this issue unfortunately.
But a simple fix is setting the correct height.
On the subj css rule
.subj > :nth-child(2)
add:
overflow:scroll;
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Center image using text-align center?
(28 answers)
Closed 20 days ago.
I'd like to use flexbox to center the image. Can I do this without putting the picture in another div?
I think I tried all flexbox options but not sure, that's why I'm asking.
Here's some HTML and CSS code.
body {
font-family: sans-serif;
font-size: 10vw;
display: flex;
flex-direction: column;
background-color: grey;
word-wrap: break-word;
}
p {
text-indent: 5vw;
}
p.Intro {
/* See other colors # media queries */
}
Img.MainIMG {
max-height: 50vh;
max-width: 50vw;
display: flex;
align-items: center;
justify-content: center;
<main>
<H1>Hi!</H1>
<p class="Intro">
Lorem ipsum dolor sit amet.
</p>
<p class="Intro">
Sed ut perspiciatis unde omnis iste natus error.
</p>
<p class="Intro">
Lorem ipsum dolor sit amet.</p>
<img src="https://images.unsplash.com/photo-1530995377270-ac41692cd439?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzUwNzQzNDE&ixlib=rb-4.0.3&q=80" class="MainIMG" alt="Smiling person">
<H1>Goodbye!</H1>
</main>
transfer the image to a block-level element with display: block. Block level elements can be centered with margin: 0 auto:
body {
font-family: sans-serif;
font-size: 10vw;
display: flex;
flex-direction: column;
background-color: grey;
word-wrap: break-word;
}
p {
text-indent: 5vw;
}
p.Intro {
/* See other colors # media queries */
}
Img.MainIMG {
max-height: 50vh;
max-width: 50vw;
display: block;
margin: 0 auto;
}
<main>
<H1>Hi!</H1>
<p class="Intro">
Lorem ipsum dolor sit amet.
</p>
<p class="Intro">
Sed ut perspiciatis unde omnis iste natus error.
</p>
<p class="Intro">
Lorem ipsum dolor sit amet.</p>
<img src="https://images.unsplash.com/photo-1530995377270-ac41692cd439?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzUwNzQzNDE&ixlib=rb-4.0.3&q=80" class="MainIMG" alt="Smiling person">
<H1>Goodbye!</H1>
</main>
Yes you can. You can use margin: 0 auto property on the image and it will do the trick.
body {
font-family: sans-serif;
font-size: 10vw;
display: flex;
flex-direction: column;
background-color: grey;
word-wrap: break-word;
}
p {
text-indent: 5vw;
}
p.Intro {
/* See other colors # media queries */
}
img.MainIMG {
max-height: 50vh;
/* Make an image height 100% of parent div */
max-width: 50vw;
/* Make an image width 100% of parent div */
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto; /*add this*/
}
<main>
<H1>Hi!</H1>
<p class="Intro">
Lorem ipsum dolor sit amet.
</p>
<p class="Intro">
Sed ut perspiciatis unde omnis iste natus error.
</p>
<p class="Intro">
Lorem ipsum dolor sit amet.</p>
<img src="https://images.unsplash.com/photo-1530995377270-ac41692cd439?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzUwNzQzNDE&ixlib=rb-4.0.3&q=80" class="MainIMG" alt="Smiling person">
<H1>Goodbye!</H1>
</main>
Please change display:inherit style of image. Please add following style.
img.MainIMG {
max-height: 50vh;
/* Make an image height 100% of parent div */
max-width: 50vw;
/* Make an image width 100% of parent div */
display: inherit;
margin-left: auto;
margin-right: auto;
}
How do I reposition my text to the bottom of the image after using media query?
main img {
width: 100%;
height: 100%;
}
div {
background-color: red;
display: flex;
flex-direction: column;
}
<main>
<img src="https://dummyimage.com/800x400/000/fff">
<div>
<h1>
Learn something new everyday
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button>Start Here</button>
</div>
</main>
You mean reposition like this? at what viewport? heres a sample
main img {
width: 100%;
height: 100%;
}
div {
background-color: red;
display: flex;
flex-direction: column;
}
#media only screen and (max-width:1024px){
div {
background-color: red;
display: flex;
flex-direction: column-reverse;
text-align:center;
}
}
<main>
<img src="https://dummyimage.com/800x400/000/fff">
<div>
<h1>
Learn something new everyday RESIZE ME
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button>Start Here</button>
</div>
</main>
I using this setup to make hero elements exceed to full page width:
Html:
main {
max-width: 600px;
margin: 0 auto;
}
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor...</p>
<figure class="full-width">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/hero.jpg" alt="">
<figcaption>Some text.</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor...</p>
</main>
But I would like to set a max-width, so if the screen is more than, say, 2000px, then stop making the "full-width" element full width, but instead just 2000px wide and centered (and still exceeding the parent element's width). How can I achieve this?
I tried with:
#media (min-width: 2000px) {
.full-width {
max-width: 2000px;
}
}
but it just pushed the element to one side.
JsFiddle here.
This happnes because of margines. You can just use,
.full-width{
width: 100%,
margin: 0px
}
And also use
Padding : 0px
In parent if needed.
You could use display: flex property in order to handle the alignment:
main {
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.full-width {
width: 100vw;
position: relative;
}
#media (min-width: 2000px) {
.full-width {
max-width: 2000px;
}
}
img {
width: 100%;
}
How can I expand the width of the text group while not affecting the sizing of the image? When I add a width on the text group, it makes the image smaller.
body {
background: #0A0B5B;
}
.hero {
display: flex;
justify-content: space-between;
}
.text-group {
background-color: green;
}
img {
position: relative;
right: -40%;
}
<section class="hero">
<div class="text-group">
<h2>Space Enthusiast & JavaScript Developer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
<img src="https://raw.githubusercontent.com/iamshaunjp/responsive-css-grid-build/lesson-14/assets/banner_image.png" alt="">
</section>
I think this is more suitable for a background:
body {
background: #0A0B5B;
}
.hero {
display: flex;
background:
url(https://raw.githubusercontent.com/iamshaunjp/responsive-css-grid-build/lesson-14/assets/banner_image.png)
right/
auto 100%
no-repeat;
}
.text-group {
min-height: 300px;
color:#fff;
}
<section class="hero">
<div class="text-group">
<h2>Space Enthusiast & JavaScript Developer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
</section>
You can apply a fixed width and flex-shrink: 0; to the .text-group. That way it won't become any smaller than the defined width.
body {
background: #0A0B5B;
}
.hero {
display: flex;
justify-content: space-between;
}
.text-group {
background-color: green;
width: 300px;
flex-shrink: 0;
}
img {
position: relative;
right: -40%;
}
<section class="hero">
<div class="text-group">
<h2>Space Enthusiast & JavaScript Developer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
<img src="https://raw.githubusercontent.com/iamshaunjp/responsive-css-grid-build/lesson-14/assets/banner_image.png" alt="">
</section>
I modified the code with more flex configuration. I hope this is what you are looking for.
body {
background: #0A0B5B;
}
.hero {
display: flex;
justify-content: space-between;
}
.text-group {
background-color: green;
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 0 500px;
}
img {
flex: 0 0 auto;
}
<section class="hero">
<div class="text-group">
<h2>Space Enthusiast & JavaScript Developer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
<img src="https://raw.githubusercontent.com/iamshaunjp/responsive-css-grid-build/lesson-14/assets/banner_image.png" alt="">
</section>
I am trying to make some elements overlap and staggered using flexbox, but I also need it responsive to stack when on mobile. I am new to flexbox and want to see if I can get some help making this responsive. Below is my html and css. As you can see when you run the snippet, it is not how I want it to look. This is my codepen and that is the desktop layout I would like, then I would like the divs to stack as it gets to mobile: https://codepen.io/ascarb1/full/zWZVRw/
Any help is really appreciated.
body {
max-width: 1600px;
width: 95%;
margin: 0 auto;
}
.home-story-container {
display: flex;
margin: 10em auto;
flex-direction: column;
justify-content: space-between;
align-items: left;
float: none;
}
.home-story-container .home-story-text-block {
height: 373px;
width: 618px;
background: #ddd;
align-self: flex-start;
flex-shrink: 0;
margin-left: 15em;
}
.home-story-container .home-story-text-block .home-story-text-content {
width: 60%;
margin: 4em 0 0 4em;
}
.home-story-container .home-story-image-block {
width: 640px;
align-self: flex-end;
flex-shrink: 0;
margin-right: 14em;
margin-top: -23em;
}
.home-story-container .home-story-video-block {
width: auto;
align-self: flex-start;
flex-shrink: 0;
margin-left: 21em;
margin-top: -10em;
}
.home-story-container .home-story-quote-block {
align-self: flex-end;
flex-shrink: 0;
margin-right: 16em;
margin-top: -9.5em;
width: 413px;
}
<div class="col-md-12">
<div class="home-story-container">
<div class="home-story-text-block">
<div class="home-story-text-content">
<h1>Lorem ipsum dolor sit amet</h1>
<br>
<p>Lorem ipsum dolor sit amet, malesuada quisque sit consectetuer adipiscing odit, sed tortor leo nunc, a vel erat ultricies.</p>
</div>
</div>
<div class="home-story-image-block"><img src="http://via.placeholder.com/640x373"></div>
<div class="home-story-video-block"><iframe width="560" height="315" src="https://www.youtube.com/embed/SkgTxQm9DWM?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></div>
<div class="home-story-quote-block">
<p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet<br><span>Lorem ipsum dolor sit amet.</span></p>
</div>
</div>
</div>