Display flex gives inconsistent scrolling behavior on item resize
0
I'm trying to get a hovered item in a flex container to increase in size on hover. That much I have working, but the issue is, the window does not scroll consistently.
If you scroll down so that the footer is visible, hovering on the left red box causes the page to scroll where as the right does not.
Ideally, I would like both boxes to behave like the left one.
All suggestions are appreciated
*{
box-sizing:border-box;
}
header{
background:green;
height:200px;
margin-bottom:1em;
}
.flex {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.flex > div {
height: 300px;
padding: 1em;
width:50%;
transition: all .5s ease-in-out
}
.flex div div {
height: 100%;
width: 100%;
background: red;
}
.flex > div:hover{
height:500px;
width: 150%;
}
footer{
background:blue;
height:200px;
margin-top:1em;
}<header></header>
<div class="flex">
<div>
<div>
</div>
</div>
<div>
<div>
</div>
</div>
</div>
<footer></footer>html css flexbox
asked Nov 23 '18 at 20:16
andrewandrew
6,97742042
add a comment |
0
I'm trying to get a hovered item in a flex container to increase in size on hover. That much I have working, but the issue is, the window does not scroll consistently.
If you scroll down so that the footer is visible, hovering on the left red box causes the page to scroll where as the right does not.
Ideally, I would like both boxes to behave like the left one.
All suggestions are appreciated
*{
box-sizing:border-box;
}
header{
background:green;
height:200px;
margin-bottom:1em;
}
.flex {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.flex > div {
height: 300px;
padding: 1em;
width:50%;
transition: all .5s ease-in-out
}
.flex div div {
height: 100%;
width: 100%;
background: red;
}
.flex > div:hover{
height:500px;
width: 150%;
}
footer{
background:blue;
height:200px;
margin-top:1em;
}<header></header>
<div class="flex">
<div>
<div>
</div>
</div>
<div>
<div>
</div>
</div>
</div>
<footer></footer>html css flexbox
asked Nov 23 '18 at 20:16
andrewandrew
6,97742042
what browsers? for me they behave the same
– Temani Afif
Nov 23 '18 at 20:43
I'm using chrome 70.0.3538.102. The starting scroll position before you hover is important, you should notice the difference when the red boxes and blue footer are both visible
– andrew
Nov 23 '18 at 20:55
yes I tried to reproduce but nothing .. probably not easy to see
– Temani Afif
Nov 23 '18 at 21:17
solved with overflow-anchor: none on the flex container
– andrew
Nov 23 '18 at 21:49
add a comment |
0
0
0
I'm trying to get a hovered item in a flex container to increase in size on hover. That much I have working, but the issue is, the window does not scroll consistently.
If you scroll down so that the footer is visible, hovering on the left red box causes the page to scroll where as the right does not.
Ideally, I would like both boxes to behave like the left one.
All suggestions are appreciated
*{
box-sizing:border-box;
}
header{
background:green;
height:200px;
margin-bottom:1em;
}
.flex {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.flex > div {
height: 300px;
padding: 1em;
width:50%;
transition: all .5s ease-in-out
}
.flex div div {
height: 100%;
width: 100%;
background: red;
}
.flex > div:hover{
height:500px;
width: 150%;
}
footer{
background:blue;
height:200px;
margin-top:1em;
}<header></header>
<div class="flex">
<div>
<div>
</div>
</div>
<div>
<div>
</div>
</div>
</div>
<footer></footer>html css flexbox
asked Nov 23 '18 at 20:16
andrewandrew
6,97742042
I'm trying to get a hovered item in a flex container to increase in size on hover. That much I have working, but the issue is, the window does not scroll consistently.
If you scroll down so that the footer is visible, hovering on the left red box causes the page to scroll where as the right does not.
Ideally, I would like both boxes to behave like the left one.
All suggestions are appreciated
*{
box-sizing:border-box;
}
header{
background:green;
height:200px;
margin-bottom:1em;
}
.flex {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.flex > div {
height: 300px;
padding: 1em;
width:50%;
transition: all .5s ease-in-out
}
.flex div div {
height: 100%;
width: 100%;
background: red;
}
.flex > div:hover{
height:500px;
width: 150%;
}
footer{
background:blue;
height:200px;
margin-top:1em;
}<header></header>
<div class="flex">
<div>
<div>
</div>
</div>
<div>
<div>
</div>
</div>
</div>
<footer></footer>*{
box-sizing:border-box;
}
header{
background:green;
height:200px;
margin-bottom:1em;
}
.flex {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.flex > div {
height: 300px;
padding: 1em;
width:50%;
transition: all .5s ease-in-out
}
.flex div div {
height: 100%;
width: 100%;
background: red;
}
.flex > div:hover{
height:500px;
width: 150%;
}
footer{
background:blue;
height:200px;
margin-top:1em;
}<header></header>
<div class="flex">
<div>
<div>
</div>
</div>
<div>
<div>
</div>
</div>
</div>
<footer></footer>*{
box-sizing:border-box;
}
header{
background:green;
height:200px;
margin-bottom:1em;
}
.flex {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.flex > div {
height: 300px;
padding: 1em;
width:50%;
transition: all .5s ease-in-out
}
.flex div div {
height: 100%;
width: 100%;
background: red;
}
.flex > div:hover{
height:500px;
width: 150%;
}
footer{
background:blue;
height:200px;
margin-top:1em;
}<header></header>
<div class="flex">
<div>
<div>
</div>
</div>
<div>
<div>
</div>
</div>
</div>
<footer></footer>html css flexbox
html css flexbox
asked Nov 23 '18 at 20:16
andrewandrew
6,97742042
asked Nov 23 '18 at 20:16
andrewandrew
6,97742042
asked Nov 23 '18 at 20:16
andrewandrew
6,97742042
asked Nov 23 '18 at 20:16
andrewandrew
6,97742042
asked Nov 23 '18 at 20:16
andrewandrew
6,97742042
6,97742042
what browsers? for me they behave the same
– Temani Afif
Nov 23 '18 at 20:43
I'm using chrome 70.0.3538.102. The starting scroll position before you hover is important, you should notice the difference when the red boxes and blue footer are both visible
– andrew
Nov 23 '18 at 20:55
yes I tried to reproduce but nothing .. probably not easy to see
– Temani Afif
Nov 23 '18 at 21:17
solved with overflow-anchor: none on the flex container
– andrew
Nov 23 '18 at 21:49
add a comment |
what browsers? for me they behave the same
– Temani Afif
Nov 23 '18 at 20:43
I'm using chrome 70.0.3538.102. The starting scroll position before you hover is important, you should notice the difference when the red boxes and blue footer are both visible
– andrew
Nov 23 '18 at 20:55
yes I tried to reproduce but nothing .. probably not easy to see
– Temani Afif
Nov 23 '18 at 21:17
solved with overflow-anchor: none on the flex container
– andrew
Nov 23 '18 at 21:49
what browsers? for me they behave the same
– Temani Afif
Nov 23 '18 at 20:43
what browsers? for me they behave the same
– Temani Afif
Nov 23 '18 at 20:43
I'm using chrome 70.0.3538.102. The starting scroll position before you hover is important, you should notice the difference when the red boxes and blue footer are both visible
– andrew
Nov 23 '18 at 20:55
I'm using chrome 70.0.3538.102. The starting scroll position before you hover is important, you should notice the difference when the red boxes and blue footer are both visible
– andrew
Nov 23 '18 at 20:55
yes I tried to reproduce but nothing .. probably not easy to see
– Temani Afif
Nov 23 '18 at 21:17
yes I tried to reproduce but nothing .. probably not easy to see
– Temani Afif
Nov 23 '18 at 21:17
solved with overflow-anchor: none on the flex container
– andrew
Nov 23 '18 at 21:49
solved with overflow-anchor: none on the flex container
– andrew
Nov 23 '18 at 21:49
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452501%2fdisplay-flex-gives-inconsistent-scrolling-behavior-on-item-resize%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452501%2fdisplay-flex-gives-inconsistent-scrolling-behavior-on-item-resize%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
what browsers? for me they behave the same
– Temani Afif
Nov 23 '18 at 20:43
I'm using chrome 70.0.3538.102. The starting scroll position before you hover is important, you should notice the difference when the red boxes and blue footer are both visible
– andrew
Nov 23 '18 at 20:55
yes I tried to reproduce but nothing .. probably not easy to see
– Temani Afif
Nov 23 '18 at 21:17
solved with overflow-anchor: none on the flex container
– andrew
Nov 23 '18 at 21:49