Mixing
Flex column children height calculation is off in IE
I am using a UI library's tab control and am having trouble with IE. When the number of tabs causes the container to scroll, the flex children's height does not appear to get calculated correctly in IE. If I cause a repaint by editing a style or resizing the window, then it adjusts correctly. Oddly, loading the attach HTML file via a file:/// URL, if you refresh it many times, I've noticed that it does render correctly sometimes. But not very often. All other browsers render this properly every time.
I've tried every kind of flex setting combination that I can think of however nothing seems to help.
I don't have any simple markup to provide unfortunately
See a CodePen here for the HTML and CSS - https://codepen.io/anon/pen/VqrBGV.
Screenshot of the issue as I see it - https://drive.google.com/file/d/1okzw2qjgPMr-LVsr_-Z-GXE28x2KAueG/view?usp=sharing
html css css3 internet-explorer flexbox
asked Dec 31 '18 at 19:50
tczx3tczx3
84
add a comment |
I am using a UI library's tab control and am having trouble with IE. When the number of tabs causes the container to scroll, the flex children's height does not appear to get calculated correctly in IE. If I cause a repaint by editing a style or resizing the window, then it adjusts correctly. Oddly, loading the attach HTML file via a file:/// URL, if you refresh it many times, I've noticed that it does render correctly sometimes. But not very often. All other browsers render this properly every time.
I've tried every kind of flex setting combination that I can think of however nothing seems to help.
I don't have any simple markup to provide unfortunately
See a CodePen here for the HTML and CSS - https://codepen.io/anon/pen/VqrBGV.
Screenshot of the issue as I see it - https://drive.google.com/file/d/1okzw2qjgPMr-LVsr_-Z-GXE28x2KAueG/view?usp=sharing
html css css3 internet-explorer flexbox
asked Dec 31 '18 at 19:50
tczx3tczx3
84
Can you please inform us, Which version of IE you are using? I try to make a test with IE 11 and find that It runs your code without any issue. Here is a testing result. i.postimg.cc/nrph4wqq/5.gif Let me know, If I miss anything in your above description. I will try to correct my self.
– Deepak-MSFT
Jan 1 at 3:23
I have been using IE 11. And if it helps any, the HTML in the document is actually populated using mithrilJS's render method. I just saved out the outerHTML of the document to provide here.
– tczx3
Jan 3 at 17:14
Updated the OP to include a link to a screenshot of the issue.
– tczx3
Jan 3 at 17:20
I can see that there is a lot of CSS code in your example. Is that whole code is required by your web page or it is unnecessary? For testing purpose, Try to remove unnecessary CSS code and check whether it solves your issue or not.
– Deepak-MSFT
Jan 4 at 7:57
add a comment |
I am using a UI library's tab control and am having trouble with IE. When the number of tabs causes the container to scroll, the flex children's height does not appear to get calculated correctly in IE. If I cause a repaint by editing a style or resizing the window, then it adjusts correctly. Oddly, loading the attach HTML file via a file:/// URL, if you refresh it many times, I've noticed that it does render correctly sometimes. But not very often. All other browsers render this properly every time.
I've tried every kind of flex setting combination that I can think of however nothing seems to help.
I don't have any simple markup to provide unfortunately
See a CodePen here for the HTML and CSS - https://codepen.io/anon/pen/VqrBGV.
Screenshot of the issue as I see it - https://drive.google.com/file/d/1okzw2qjgPMr-LVsr_-Z-GXE28x2KAueG/view?usp=sharing
html css css3 internet-explorer flexbox
asked Dec 31 '18 at 19:50
tczx3tczx3
84
I am using a UI library's tab control and am having trouble with IE. When the number of tabs causes the container to scroll, the flex children's height does not appear to get calculated correctly in IE. If I cause a repaint by editing a style or resizing the window, then it adjusts correctly. Oddly, loading the attach HTML file via a file:/// URL, if you refresh it many times, I've noticed that it does render correctly sometimes. But not very often. All other browsers render this properly every time.
I've tried every kind of flex setting combination that I can think of however nothing seems to help.
I don't have any simple markup to provide unfortunately
See a CodePen here for the HTML and CSS - https://codepen.io/anon/pen/VqrBGV.
Screenshot of the issue as I see it - https://drive.google.com/file/d/1okzw2qjgPMr-LVsr_-Z-GXE28x2KAueG/view?usp=sharing
html css css3 internet-explorer flexbox
html css css3 internet-explorer flexbox
asked Dec 31 '18 at 19:50
tczx3tczx3
84
asked Dec 31 '18 at 19:50
tczx3tczx3
84
edited Jan 3 at 17:20
tczx3
asked Dec 31 '18 at 19:50
tczx3tczx3
84
asked Dec 31 '18 at 19:50
tczx3tczx3
84
asked Dec 31 '18 at 19:50
tczx3tczx3
84
84
Can you please inform us, Which version of IE you are using? I try to make a test with IE 11 and find that It runs your code without any issue. Here is a testing result. i.postimg.cc/nrph4wqq/5.gif Let me know, If I miss anything in your above description. I will try to correct my self.
– Deepak-MSFT
Jan 1 at 3:23
I have been using IE 11. And if it helps any, the HTML in the document is actually populated using mithrilJS's render method. I just saved out the outerHTML of the document to provide here.
– tczx3
Jan 3 at 17:14
Updated the OP to include a link to a screenshot of the issue.
– tczx3
Jan 3 at 17:20
I can see that there is a lot of CSS code in your example. Is that whole code is required by your web page or it is unnecessary? For testing purpose, Try to remove unnecessary CSS code and check whether it solves your issue or not.
– Deepak-MSFT
Jan 4 at 7:57
add a comment |
Can you please inform us, Which version of IE you are using? I try to make a test with IE 11 and find that It runs your code without any issue. Here is a testing result. i.postimg.cc/nrph4wqq/5.gif Let me know, If I miss anything in your above description. I will try to correct my self.
– Deepak-MSFT
Jan 1 at 3:23
I have been using IE 11. And if it helps any, the HTML in the document is actually populated using mithrilJS's render method. I just saved out the outerHTML of the document to provide here.
– tczx3
Jan 3 at 17:14
Updated the OP to include a link to a screenshot of the issue.
– tczx3
Jan 3 at 17:20
I can see that there is a lot of CSS code in your example. Is that whole code is required by your web page or it is unnecessary? For testing purpose, Try to remove unnecessary CSS code and check whether it solves your issue or not.
– Deepak-MSFT
Jan 4 at 7:57
Can you please inform us, Which version of IE you are using? I try to make a test with IE 11 and find that It runs your code without any issue. Here is a testing result. i.postimg.cc/nrph4wqq/5.gif Let me know, If I miss anything in your above description. I will try to correct my self.
– Deepak-MSFT
Jan 1 at 3:23
Can you please inform us, Which version of IE you are using? I try to make a test with IE 11 and find that It runs your code without any issue. Here is a testing result. i.postimg.cc/nrph4wqq/5.gif Let me know, If I miss anything in your above description. I will try to correct my self.
– Deepak-MSFT
Jan 1 at 3:23
I have been using IE 11. And if it helps any, the HTML in the document is actually populated using mithrilJS's render method. I just saved out the outerHTML of the document to provide here.
– tczx3
Jan 3 at 17:14
I have been using IE 11. And if it helps any, the HTML in the document is actually populated using mithrilJS's render method. I just saved out the outerHTML of the document to provide here.
– tczx3
Jan 3 at 17:14
Updated the OP to include a link to a screenshot of the issue.
– tczx3
Jan 3 at 17:20
Updated the OP to include a link to a screenshot of the issue.
– tczx3
Jan 3 at 17:20
I can see that there is a lot of CSS code in your example. Is that whole code is required by your web page or it is unnecessary? For testing purpose, Try to remove unnecessary CSS code and check whether it solves your issue or not.
– Deepak-MSFT
Jan 4 at 7:57
I can see that there is a lot of CSS code in your example. Is that whole code is required by your web page or it is unnecessary? For testing purpose, Try to remove unnecessary CSS code and check whether it solves your issue or not.
– Deepak-MSFT
Jan 4 at 7:57
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
});
}
});
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%2f53990967%2fflex-column-children-height-calculation-is-off-in-ie%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
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.
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%2f53990967%2fflex-column-children-height-calculation-is-off-in-ie%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
Can you please inform us, Which version of IE you are using? I try to make a test with IE 11 and find that It runs your code without any issue. Here is a testing result. i.postimg.cc/nrph4wqq/5.gif Let me know, If I miss anything in your above description. I will try to correct my self.
– Deepak-MSFT
Jan 1 at 3:23
I have been using IE 11. And if it helps any, the HTML in the document is actually populated using mithrilJS's render method. I just saved out the outerHTML of the document to provide here.
– tczx3
Jan 3 at 17:14
Updated the OP to include a link to a screenshot of the issue.
– tczx3
Jan 3 at 17:20
I can see that there is a lot of CSS code in your example. Is that whole code is required by your web page or it is unnecessary? For testing purpose, Try to remove unnecessary CSS code and check whether it solves your issue or not.
– Deepak-MSFT
Jan 4 at 7:57