Flex container and float, which is the correct width?
I've got a document like this:
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
main
width: 200px;
main > div
display: flex;
main > div:nth-child(odd)
background: red;
height: 40px;
main > div:nth-child(even)
background: green;
height: 20px;
main > aside
shape-outside: content-box;
background: pink;
width: 50%;
float: right;
clear: right;
main > aside:nth-child(odd)
margin-top: 100px;
height: 50px;
main > aside:nth-child(even)
margin-top: 50px;
height: 40px;
</style>
</head>
<body>
<main>
<aside></aside>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<aside></aside>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
</body>
</html>
where I want to push some floating elements down by a given offset. This works in Firefox 63 but not in Chrome 69, and I wonder what is the correct behaviour, and if any workarounds are known.
So I want the main content to flow around just the content area of the aside, and ignore the top margin, even though the div comes after the aside in the document. To achieve this, I use css shapes to make the main content flow around the content box. To make each item (and this is where my doubt is) take only the available width taking into account floating elements, I set display: flex. In Firefox this makes only the divs next to the aside content box be 50%. Is this behaviour documented somewhere, that flex containers don't overlap with floating elements like block elements do?
Chrome does not honor the css shape and makes every div in the main until after the last aside half the width when the divs have display: flex.
Codepen link: https://codepen.io/anon/pen/qQjOqp
html css flexbox css-float css-shapes
asked Nov 15 '18 at 20:10
bwindelsbwindels
1,1571018
add a comment |
I've got a document like this:
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
main
width: 200px;
main > div
display: flex;
main > div:nth-child(odd)
background: red;
height: 40px;
main > div:nth-child(even)
background: green;
height: 20px;
main > aside
shape-outside: content-box;
background: pink;
width: 50%;
float: right;
clear: right;
main > aside:nth-child(odd)
margin-top: 100px;
height: 50px;
main > aside:nth-child(even)
margin-top: 50px;
height: 40px;
</style>
</head>
<body>
<main>
<aside></aside>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<aside></aside>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
</body>
</html>
where I want to push some floating elements down by a given offset. This works in Firefox 63 but not in Chrome 69, and I wonder what is the correct behaviour, and if any workarounds are known.
So I want the main content to flow around just the content area of the aside, and ignore the top margin, even though the div comes after the aside in the document. To achieve this, I use css shapes to make the main content flow around the content box. To make each item (and this is where my doubt is) take only the available width taking into account floating elements, I set display: flex. In Firefox this makes only the divs next to the aside content box be 50%. Is this behaviour documented somewhere, that flex containers don't overlap with floating elements like block elements do?
Chrome does not honor the css shape and makes every div in the main until after the last aside half the width when the divs have display: flex.
Codepen link: https://codepen.io/anon/pen/qQjOqp
html css flexbox css-float css-shapes
asked Nov 15 '18 at 20:10
bwindelsbwindels
1,1571018
Is the use ofaside:nth-child()and notaside:nth-of-type()selector intentional? Bothasideelements are currently captured by theoddrule because they're counted together withdivs.
– Krzysztof Szafranek
Nov 15 '18 at 20:55
Yeah,nth-of-typewould be a better fit, but it's just to show that all theasides anddivs can be of different heights.
– bwindels
Nov 15 '18 at 22:04
I think this isn't a well-defined browser behavior becauseshape-outsideis for wrapping inline content. Could you detail more what you want your actual page to look/behave like? Your example for instance could easily be replicated with a grid.
– tagurit
Nov 15 '18 at 22:40
@tagurit I'm trying to bottom-align a floated element (the asides) to one of the non-floated elements (the divs). Both the number and size of floated and non-floated elements is not predictable and depends on generated content. With the above technique I am using javascript to find the correct offset so it bottom aligns to a given div. It's important white-space above and below the floated elements is filled where possible with divs extending. The content inside the divs can't be layed out with justdisplay: inline. Ideally I can usedisplay: flexlike above.
– bwindels
Nov 16 '18 at 8:36
Will probably have to go for the second best option, which usesposition: absoluteand resizes individual divs with javascript.
– bwindels
Nov 16 '18 at 8:37
add a comment |
I've got a document like this:
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
main
width: 200px;
main > div
display: flex;
main > div:nth-child(odd)
background: red;
height: 40px;
main > div:nth-child(even)
background: green;
height: 20px;
main > aside
shape-outside: content-box;
background: pink;
width: 50%;
float: right;
clear: right;
main > aside:nth-child(odd)
margin-top: 100px;
height: 50px;
main > aside:nth-child(even)
margin-top: 50px;
height: 40px;
</style>
</head>
<body>
<main>
<aside></aside>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<aside></aside>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
</body>
</html>
where I want to push some floating elements down by a given offset. This works in Firefox 63 but not in Chrome 69, and I wonder what is the correct behaviour, and if any workarounds are known.
So I want the main content to flow around just the content area of the aside, and ignore the top margin, even though the div comes after the aside in the document. To achieve this, I use css shapes to make the main content flow around the content box. To make each item (and this is where my doubt is) take only the available width taking into account floating elements, I set display: flex. In Firefox this makes only the divs next to the aside content box be 50%. Is this behaviour documented somewhere, that flex containers don't overlap with floating elements like block elements do?
Chrome does not honor the css shape and makes every div in the main until after the last aside half the width when the divs have display: flex.
Codepen link: https://codepen.io/anon/pen/qQjOqp
html css flexbox css-float css-shapes
asked Nov 15 '18 at 20:10
bwindelsbwindels
1,1571018
I've got a document like this:
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
main
width: 200px;
main > div
display: flex;
main > div:nth-child(odd)
background: red;
height: 40px;
main > div:nth-child(even)
background: green;
height: 20px;
main > aside
shape-outside: content-box;
background: pink;
width: 50%;
float: right;
clear: right;
main > aside:nth-child(odd)
margin-top: 100px;
height: 50px;
main > aside:nth-child(even)
margin-top: 50px;
height: 40px;
</style>
</head>
<body>
<main>
<aside></aside>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<aside></aside>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
</body>
</html>
where I want to push some floating elements down by a given offset. This works in Firefox 63 but not in Chrome 69, and I wonder what is the correct behaviour, and if any workarounds are known.
So I want the main content to flow around just the content area of the aside, and ignore the top margin, even though the div comes after the aside in the document. To achieve this, I use css shapes to make the main content flow around the content box. To make each item (and this is where my doubt is) take only the available width taking into account floating elements, I set display: flex. In Firefox this makes only the divs next to the aside content box be 50%. Is this behaviour documented somewhere, that flex containers don't overlap with floating elements like block elements do?
Chrome does not honor the css shape and makes every div in the main until after the last aside half the width when the divs have display: flex.
Codepen link: https://codepen.io/anon/pen/qQjOqp
html css flexbox css-float css-shapes
html css flexbox css-float css-shapes
asked Nov 15 '18 at 20:10
bwindelsbwindels
1,1571018
asked Nov 15 '18 at 20:10
bwindelsbwindels
1,1571018
asked Nov 15 '18 at 20:10
bwindelsbwindels
1,1571018
asked Nov 15 '18 at 20:10
bwindelsbwindels
1,1571018
asked Nov 15 '18 at 20:10
bwindelsbwindels
1,1571018
1,1571018
Is the use ofaside:nth-child()and notaside:nth-of-type()selector intentional? Bothasideelements are currently captured by theoddrule because they're counted together withdivs.
– Krzysztof Szafranek
Nov 15 '18 at 20:55
Yeah,nth-of-typewould be a better fit, but it's just to show that all theasides anddivs can be of different heights.
– bwindels
Nov 15 '18 at 22:04
I think this isn't a well-defined browser behavior becauseshape-outsideis for wrapping inline content. Could you detail more what you want your actual page to look/behave like? Your example for instance could easily be replicated with a grid.
– tagurit
Nov 15 '18 at 22:40
@tagurit I'm trying to bottom-align a floated element (the asides) to one of the non-floated elements (the divs). Both the number and size of floated and non-floated elements is not predictable and depends on generated content. With the above technique I am using javascript to find the correct offset so it bottom aligns to a given div. It's important white-space above and below the floated elements is filled where possible with divs extending. The content inside the divs can't be layed out with justdisplay: inline. Ideally I can usedisplay: flexlike above.
– bwindels
Nov 16 '18 at 8:36
Will probably have to go for the second best option, which usesposition: absoluteand resizes individual divs with javascript.
– bwindels
Nov 16 '18 at 8:37
add a comment |
Is the use ofaside:nth-child()and notaside:nth-of-type()selector intentional? Bothasideelements are currently captured by theoddrule because they're counted together withdivs.
– Krzysztof Szafranek
Nov 15 '18 at 20:55
Yeah,nth-of-typewould be a better fit, but it's just to show that all theasides anddivs can be of different heights.
– bwindels
Nov 15 '18 at 22:04
I think this isn't a well-defined browser behavior becauseshape-outsideis for wrapping inline content. Could you detail more what you want your actual page to look/behave like? Your example for instance could easily be replicated with a grid.
– tagurit
Nov 15 '18 at 22:40
@tagurit I'm trying to bottom-align a floated element (the asides) to one of the non-floated elements (the divs). Both the number and size of floated and non-floated elements is not predictable and depends on generated content. With the above technique I am using javascript to find the correct offset so it bottom aligns to a given div. It's important white-space above and below the floated elements is filled where possible with divs extending. The content inside the divs can't be layed out with justdisplay: inline. Ideally I can usedisplay: flexlike above.
– bwindels
Nov 16 '18 at 8:36
Will probably have to go for the second best option, which usesposition: absoluteand resizes individual divs with javascript.
– bwindels
Nov 16 '18 at 8:37
Is the use of
aside:nth-child() and not aside:nth-of-type() selector intentional? Both aside elements are currently captured by the odd rule because they're counted together with divs.– Krzysztof Szafranek
Nov 15 '18 at 20:55
Is the use of
aside:nth-child() and not aside:nth-of-type() selector intentional? Both aside elements are currently captured by the odd rule because they're counted together with divs.– Krzysztof Szafranek
Nov 15 '18 at 20:55
Yeah,
nth-of-type would be a better fit, but it's just to show that all the asides and divs can be of different heights.– bwindels
Nov 15 '18 at 22:04
Yeah,
nth-of-type would be a better fit, but it's just to show that all the asides and divs can be of different heights.– bwindels
Nov 15 '18 at 22:04
I think this isn't a well-defined browser behavior because
shape-outside is for wrapping inline content. Could you detail more what you want your actual page to look/behave like? Your example for instance could easily be replicated with a grid.– tagurit
Nov 15 '18 at 22:40
I think this isn't a well-defined browser behavior because
shape-outside is for wrapping inline content. Could you detail more what you want your actual page to look/behave like? Your example for instance could easily be replicated with a grid.– tagurit
Nov 15 '18 at 22:40
@tagurit I'm trying to bottom-align a floated element (the asides) to one of the non-floated elements (the divs). Both the number and size of floated and non-floated elements is not predictable and depends on generated content. With the above technique I am using javascript to find the correct offset so it bottom aligns to a given div. It's important white-space above and below the floated elements is filled where possible with divs extending. The content inside the divs can't be layed out with just
display: inline. Ideally I can use display: flex like above.– bwindels
Nov 16 '18 at 8:36
@tagurit I'm trying to bottom-align a floated element (the asides) to one of the non-floated elements (the divs). Both the number and size of floated and non-floated elements is not predictable and depends on generated content. With the above technique I am using javascript to find the correct offset so it bottom aligns to a given div. It's important white-space above and below the floated elements is filled where possible with divs extending. The content inside the divs can't be layed out with just
display: inline. Ideally I can use display: flex like above.– bwindels
Nov 16 '18 at 8:36
Will probably have to go for the second best option, which uses
position: absolute and resizes individual divs with javascript.– bwindels
Nov 16 '18 at 8:37
Will probably have to go for the second best option, which uses
position: absolute and resizes individual divs with javascript.– bwindels
Nov 16 '18 at 8:37
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%2f53327196%2fflex-container-and-float-which-is-the-correct-width%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%2f53327196%2fflex-container-and-float-which-is-the-correct-width%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
Is the use of
aside:nth-child()and notaside:nth-of-type()selector intentional? Bothasideelements are currently captured by theoddrule because they're counted together withdivs.– Krzysztof Szafranek
Nov 15 '18 at 20:55
Yeah,
nth-of-typewould be a better fit, but it's just to show that all theasides anddivs can be of different heights.– bwindels
Nov 15 '18 at 22:04
I think this isn't a well-defined browser behavior because
shape-outsideis for wrapping inline content. Could you detail more what you want your actual page to look/behave like? Your example for instance could easily be replicated with a grid.– tagurit
Nov 15 '18 at 22:40
@tagurit I'm trying to bottom-align a floated element (the asides) to one of the non-floated elements (the divs). Both the number and size of floated and non-floated elements is not predictable and depends on generated content. With the above technique I am using javascript to find the correct offset so it bottom aligns to a given div. It's important white-space above and below the floated elements is filled where possible with divs extending. The content inside the divs can't be layed out with just
display: inline. Ideally I can usedisplay: flexlike above.– bwindels
Nov 16 '18 at 8:36
Will probably have to go for the second best option, which uses
position: absoluteand resizes individual divs with javascript.– bwindels
Nov 16 '18 at 8:37