Flexbox (flex-direction: column): wrapped child not positioned correctly when one child has fixed widthHow to divide width of parent div between child divs(one auto size and one fixed)?How do I use “flex-flow: column wrap”?Unable to set width of flexbox child to 100%set parent height/width according to child in display flexboxFlexbox. Avoid child with longer height than parent (column direction)Width of fixed element within flex box itemFlexbox column stretch on Childs height?Two auto width flexbox columns with only one that wrapsflex-direction: column and wrap inside flex-direction: rowCan I target multiple divs with one nth-child() selector?
Forgetting the musical notes while performing in concert
How can I tell someone that I want to be his or her friend?
A reference to a well-known characterization of scattered compact spaces
Can a rocket refuel on Mars from water?
How could indestructible materials be used in power generation?
Alternative to sending password over mail?
Is it inappropriate for a student to attend their mentor's dissertation defense?
Watching something be written to a file live with tail
Memorizing the Keyboard
Why can't we play rap on piano?
Does a druid starting with a bow start with no arrows?
Is it legal for company to use my work email to pretend I still work there?
Is "remove commented out code" correct English?
Intersection of two sorted vectors in C++
How to take photos in burst mode, without vibration?
Can one be a co-translator of a book, if he does not know the language that the book is translated into?
What is a clear way to write a bar that has an extra beat?
Why is consensus so controversial in Britain?
What reasons are there for a Capitalist to oppose a 100% inheritance tax?
Why is Collection not simply treated as Collection<?>
Has there ever been an airliner design involving reducing generator load by installing solar panels?
When a company launches a new product do they "come out" with a new product or do they "come up" with a new product?
How to draw the figure with four pentagons?
Did Shadowfax go to Valinor?
Flexbox (flex-direction: column): wrapped child not positioned correctly when one child has fixed width
How to divide width of parent div between child divs(one auto size and one fixed)?How do I use “flex-flow: column wrap”?Unable to set width of flexbox child to 100%set parent height/width according to child in display flexboxFlexbox. Avoid child with longer height than parent (column direction)Width of fixed element within flex box itemFlexbox column stretch on Childs height?Two auto width flexbox columns with only one that wrapsflex-direction: column and wrap inside flex-direction: rowCan I target multiple divs with one nth-child() selector?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I am using a flexbox layout with flex-flow: column wrap. I am setting a height for the flexbox container. What I am trying to achieve is to have the first child element take the whole height so that the next children will wrap to the the next column. In my case, those children are wrapping to the next column, however there is a huge space between their column and the column of the first child. It seems as though the fact that I set the width of the first child somehow affects the positioning of the wrapped children.
Here is what I try to achieve:
Here is the problem I am having:
Here is link to a codepen: codepen
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
max-width: 100px;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>html css css3 flexbox
edited Mar 9 at 1:21
Michael_B
158k50255363
asked Mar 9 at 0:00
yankoloyankolo
3615
add a comment |
I am using a flexbox layout with flex-flow: column wrap. I am setting a height for the flexbox container. What I am trying to achieve is to have the first child element take the whole height so that the next children will wrap to the the next column. In my case, those children are wrapping to the next column, however there is a huge space between their column and the column of the first child. It seems as though the fact that I set the width of the first child somehow affects the positioning of the wrapped children.
Here is what I try to achieve:
Here is the problem I am having:
Here is link to a codepen: codepen
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
max-width: 100px;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>html css css3 flexbox
edited Mar 9 at 1:21
Michael_B
158k50255363
asked Mar 9 at 0:00
yankoloyankolo
3615
add a comment |
I am using a flexbox layout with flex-flow: column wrap. I am setting a height for the flexbox container. What I am trying to achieve is to have the first child element take the whole height so that the next children will wrap to the the next column. In my case, those children are wrapping to the next column, however there is a huge space between their column and the column of the first child. It seems as though the fact that I set the width of the first child somehow affects the positioning of the wrapped children.
Here is what I try to achieve:
Here is the problem I am having:
Here is link to a codepen: codepen
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
max-width: 100px;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>html css css3 flexbox
edited Mar 9 at 1:21
Michael_B
158k50255363
asked Mar 9 at 0:00
yankoloyankolo
3615
I am using a flexbox layout with flex-flow: column wrap. I am setting a height for the flexbox container. What I am trying to achieve is to have the first child element take the whole height so that the next children will wrap to the the next column. In my case, those children are wrapping to the next column, however there is a huge space between their column and the column of the first child. It seems as though the fact that I set the width of the first child somehow affects the positioning of the wrapped children.
Here is what I try to achieve:
Here is the problem I am having:
Here is link to a codepen: codepen
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
max-width: 100px;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
max-width: 100px;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
max-width: 100px;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>html css css3 flexbox
html css css3 flexbox
edited Mar 9 at 1:21
Michael_B
158k50255363
asked Mar 9 at 0:00
yankoloyankolo
3615
edited Mar 9 at 1:21
Michael_B
158k50255363
asked Mar 9 at 0:00
yankoloyankolo
3615
edited Mar 9 at 1:21
Michael_B
158k50255363
edited Mar 9 at 1:21
Michael_B
158k50255363
edited Mar 9 at 1:21
Michael_B
158k50255363
158k50255363
asked Mar 9 at 0:00
yankoloyankolo
3615
asked Mar 9 at 0:00
yankoloyankolo
3615
asked Mar 9 at 0:00
yankoloyankolo
3615
3615
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
I know this is a Flexbox question, but I'd like to throw CSS Grid into the mix. It's designed to handle both x/y layout directions. While flexbox can sometimes handle the y part, it is usually with greater difficulty/hacks.
.grid
display: grid;
grid-template-columns: 100px 1fr;
grid-template-rows: repeat(2, 1fr);
height: 100px;
border: 1px solid red;
.child1
background-color: green;
grid-row: 1/-1; /* Begin at 1 and go to the end */
.child2
background-color: yellow;
.child3
background-color: blue;
<div class="grid">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>answered Mar 9 at 0:13
Andy HoffmanAndy Hoffman
10.2k31840
Agree with this. Flexbox isn't really designed to handle things that are different sizes/directions. You can see the samples on W3 schools to see how each can be used: Grid and Flexbox.
– Nick
Mar 9 at 0:17
@Nick Yah, I love Flexbox dearly, but found myself overusing it, since I knew it pretty well. The more I learn Grid, the more I realize there's a time and place for everything.
– Andy Hoffman
Mar 9 at 0:18
@AndyHoffman I have read that browser support is still lacking for grid. In addition, it seems that IE11 doesn't support grid well. What do you think? Should I use it or should I avoid it for now?
– yankolo
Mar 9 at 1:10
@yankolo Browser support (unprefixed) is above 85%. Using a pre-processor, you can still use Grid in IE/10+. Even Opera Mini understands Grid. I would recommend using it today.
– Andy Hoffman
Mar 9 at 1:16
add a comment |
You need to set explicit width to your element. Acutally they are stretched by default.
If you remove the max-width you will have the following. Two eqaul columns where your element are stretched.
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>Adding max-width will simply restrict the width of the first element in its column
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
max-width:100px;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>And if you change the alignment you will get this:
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
align-items:flex-start;
.child1
background-color: green;
flex: 1 0 100%;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>You will see nothing because we removed the stretch alignment and there is no width defined.
Add some width to have the needed result:
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
align-items:flex-start;
.child1
background-color: green;
flex: 1 0 100%;
width:20%;
.child2
flex: 1 0 20px;
background-color: yellow;
width:80%;
.child3
flex: 1 0 20px;
background-color: blue;
width:80%;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>answered Mar 9 at 0:11
Temani AfifTemani Afif
82.1k104794
add a comment |
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%2f55072620%2fflexbox-flex-direction-column-wrapped-child-not-positioned-correctly-when-on%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I know this is a Flexbox question, but I'd like to throw CSS Grid into the mix. It's designed to handle both x/y layout directions. While flexbox can sometimes handle the y part, it is usually with greater difficulty/hacks.
.grid
display: grid;
grid-template-columns: 100px 1fr;
grid-template-rows: repeat(2, 1fr);
height: 100px;
border: 1px solid red;
.child1
background-color: green;
grid-row: 1/-1; /* Begin at 1 and go to the end */
.child2
background-color: yellow;
.child3
background-color: blue;
<div class="grid">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>answered Mar 9 at 0:13
Andy HoffmanAndy Hoffman
10.2k31840
Agree with this. Flexbox isn't really designed to handle things that are different sizes/directions. You can see the samples on W3 schools to see how each can be used: Grid and Flexbox.
– Nick
Mar 9 at 0:17
@Nick Yah, I love Flexbox dearly, but found myself overusing it, since I knew it pretty well. The more I learn Grid, the more I realize there's a time and place for everything.
– Andy Hoffman
Mar 9 at 0:18
@AndyHoffman I have read that browser support is still lacking for grid. In addition, it seems that IE11 doesn't support grid well. What do you think? Should I use it or should I avoid it for now?
– yankolo
Mar 9 at 1:10
@yankolo Browser support (unprefixed) is above 85%. Using a pre-processor, you can still use Grid in IE/10+. Even Opera Mini understands Grid. I would recommend using it today.
– Andy Hoffman
Mar 9 at 1:16
add a comment |
I know this is a Flexbox question, but I'd like to throw CSS Grid into the mix. It's designed to handle both x/y layout directions. While flexbox can sometimes handle the y part, it is usually with greater difficulty/hacks.
.grid
display: grid;
grid-template-columns: 100px 1fr;
grid-template-rows: repeat(2, 1fr);
height: 100px;
border: 1px solid red;
.child1
background-color: green;
grid-row: 1/-1; /* Begin at 1 and go to the end */
.child2
background-color: yellow;
.child3
background-color: blue;
<div class="grid">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>answered Mar 9 at 0:13
Andy HoffmanAndy Hoffman
10.2k31840
Agree with this. Flexbox isn't really designed to handle things that are different sizes/directions. You can see the samples on W3 schools to see how each can be used: Grid and Flexbox.
– Nick
Mar 9 at 0:17
@Nick Yah, I love Flexbox dearly, but found myself overusing it, since I knew it pretty well. The more I learn Grid, the more I realize there's a time and place for everything.
– Andy Hoffman
Mar 9 at 0:18
@AndyHoffman I have read that browser support is still lacking for grid. In addition, it seems that IE11 doesn't support grid well. What do you think? Should I use it or should I avoid it for now?
– yankolo
Mar 9 at 1:10
@yankolo Browser support (unprefixed) is above 85%. Using a pre-processor, you can still use Grid in IE/10+. Even Opera Mini understands Grid. I would recommend using it today.
– Andy Hoffman
Mar 9 at 1:16
add a comment |
I know this is a Flexbox question, but I'd like to throw CSS Grid into the mix. It's designed to handle both x/y layout directions. While flexbox can sometimes handle the y part, it is usually with greater difficulty/hacks.
.grid
display: grid;
grid-template-columns: 100px 1fr;
grid-template-rows: repeat(2, 1fr);
height: 100px;
border: 1px solid red;
.child1
background-color: green;
grid-row: 1/-1; /* Begin at 1 and go to the end */
.child2
background-color: yellow;
.child3
background-color: blue;
<div class="grid">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>answered Mar 9 at 0:13
Andy HoffmanAndy Hoffman
10.2k31840
I know this is a Flexbox question, but I'd like to throw CSS Grid into the mix. It's designed to handle both x/y layout directions. While flexbox can sometimes handle the y part, it is usually with greater difficulty/hacks.
.grid
display: grid;
grid-template-columns: 100px 1fr;
grid-template-rows: repeat(2, 1fr);
height: 100px;
border: 1px solid red;
.child1
background-color: green;
grid-row: 1/-1; /* Begin at 1 and go to the end */
.child2
background-color: yellow;
.child3
background-color: blue;
<div class="grid">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>.grid
display: grid;
grid-template-columns: 100px 1fr;
grid-template-rows: repeat(2, 1fr);
height: 100px;
border: 1px solid red;
.child1
background-color: green;
grid-row: 1/-1; /* Begin at 1 and go to the end */
.child2
background-color: yellow;
.child3
background-color: blue;
<div class="grid">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>.grid
display: grid;
grid-template-columns: 100px 1fr;
grid-template-rows: repeat(2, 1fr);
height: 100px;
border: 1px solid red;
.child1
background-color: green;
grid-row: 1/-1; /* Begin at 1 and go to the end */
.child2
background-color: yellow;
.child3
background-color: blue;
<div class="grid">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>answered Mar 9 at 0:13
Andy HoffmanAndy Hoffman
10.2k31840
edited Mar 9 at 4:08
answered Mar 9 at 0:13
Andy HoffmanAndy Hoffman
10.2k31840
answered Mar 9 at 0:13
Andy HoffmanAndy Hoffman
10.2k31840
answered Mar 9 at 0:13
Andy HoffmanAndy Hoffman
10.2k31840
10.2k31840
Agree with this. Flexbox isn't really designed to handle things that are different sizes/directions. You can see the samples on W3 schools to see how each can be used: Grid and Flexbox.
– Nick
Mar 9 at 0:17
@Nick Yah, I love Flexbox dearly, but found myself overusing it, since I knew it pretty well. The more I learn Grid, the more I realize there's a time and place for everything.
– Andy Hoffman
Mar 9 at 0:18
@AndyHoffman I have read that browser support is still lacking for grid. In addition, it seems that IE11 doesn't support grid well. What do you think? Should I use it or should I avoid it for now?
– yankolo
Mar 9 at 1:10
@yankolo Browser support (unprefixed) is above 85%. Using a pre-processor, you can still use Grid in IE/10+. Even Opera Mini understands Grid. I would recommend using it today.
– Andy Hoffman
Mar 9 at 1:16
add a comment |
Agree with this. Flexbox isn't really designed to handle things that are different sizes/directions. You can see the samples on W3 schools to see how each can be used: Grid and Flexbox.
– Nick
Mar 9 at 0:17
@Nick Yah, I love Flexbox dearly, but found myself overusing it, since I knew it pretty well. The more I learn Grid, the more I realize there's a time and place for everything.
– Andy Hoffman
Mar 9 at 0:18
@AndyHoffman I have read that browser support is still lacking for grid. In addition, it seems that IE11 doesn't support grid well. What do you think? Should I use it or should I avoid it for now?
– yankolo
Mar 9 at 1:10
@yankolo Browser support (unprefixed) is above 85%. Using a pre-processor, you can still use Grid in IE/10+. Even Opera Mini understands Grid. I would recommend using it today.
– Andy Hoffman
Mar 9 at 1:16
Agree with this. Flexbox isn't really designed to handle things that are different sizes/directions. You can see the samples on W3 schools to see how each can be used: Grid and Flexbox.
– Nick
Mar 9 at 0:17
Agree with this. Flexbox isn't really designed to handle things that are different sizes/directions. You can see the samples on W3 schools to see how each can be used: Grid and Flexbox.
– Nick
Mar 9 at 0:17
@Nick Yah, I love Flexbox dearly, but found myself overusing it, since I knew it pretty well. The more I learn Grid, the more I realize there's a time and place for everything.
– Andy Hoffman
Mar 9 at 0:18
@Nick Yah, I love Flexbox dearly, but found myself overusing it, since I knew it pretty well. The more I learn Grid, the more I realize there's a time and place for everything.
– Andy Hoffman
Mar 9 at 0:18
@AndyHoffman I have read that browser support is still lacking for grid. In addition, it seems that IE11 doesn't support grid well. What do you think? Should I use it or should I avoid it for now?
– yankolo
Mar 9 at 1:10
@AndyHoffman I have read that browser support is still lacking for grid. In addition, it seems that IE11 doesn't support grid well. What do you think? Should I use it or should I avoid it for now?
– yankolo
Mar 9 at 1:10
@yankolo Browser support (unprefixed) is above 85%. Using a pre-processor, you can still use Grid in IE/10+. Even Opera Mini understands Grid. I would recommend using it today.
– Andy Hoffman
Mar 9 at 1:16
@yankolo Browser support (unprefixed) is above 85%. Using a pre-processor, you can still use Grid in IE/10+. Even Opera Mini understands Grid. I would recommend using it today.
– Andy Hoffman
Mar 9 at 1:16
add a comment |
You need to set explicit width to your element. Acutally they are stretched by default.
If you remove the max-width you will have the following. Two eqaul columns where your element are stretched.
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>Adding max-width will simply restrict the width of the first element in its column
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
max-width:100px;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>And if you change the alignment you will get this:
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
align-items:flex-start;
.child1
background-color: green;
flex: 1 0 100%;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>You will see nothing because we removed the stretch alignment and there is no width defined.
Add some width to have the needed result:
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
align-items:flex-start;
.child1
background-color: green;
flex: 1 0 100%;
width:20%;
.child2
flex: 1 0 20px;
background-color: yellow;
width:80%;
.child3
flex: 1 0 20px;
background-color: blue;
width:80%;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>answered Mar 9 at 0:11
Temani AfifTemani Afif
82.1k104794
add a comment |
You need to set explicit width to your element. Acutally they are stretched by default.
If you remove the max-width you will have the following. Two eqaul columns where your element are stretched.
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>Adding max-width will simply restrict the width of the first element in its column
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
max-width:100px;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>And if you change the alignment you will get this:
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
align-items:flex-start;
.child1
background-color: green;
flex: 1 0 100%;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>You will see nothing because we removed the stretch alignment and there is no width defined.
Add some width to have the needed result:
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
align-items:flex-start;
.child1
background-color: green;
flex: 1 0 100%;
width:20%;
.child2
flex: 1 0 20px;
background-color: yellow;
width:80%;
.child3
flex: 1 0 20px;
background-color: blue;
width:80%;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>answered Mar 9 at 0:11
Temani AfifTemani Afif
82.1k104794
add a comment |
You need to set explicit width to your element. Acutally they are stretched by default.
If you remove the max-width you will have the following. Two eqaul columns where your element are stretched.
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>Adding max-width will simply restrict the width of the first element in its column
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
max-width:100px;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>And if you change the alignment you will get this:
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
align-items:flex-start;
.child1
background-color: green;
flex: 1 0 100%;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>You will see nothing because we removed the stretch alignment and there is no width defined.
Add some width to have the needed result:
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
align-items:flex-start;
.child1
background-color: green;
flex: 1 0 100%;
width:20%;
.child2
flex: 1 0 20px;
background-color: yellow;
width:80%;
.child3
flex: 1 0 20px;
background-color: blue;
width:80%;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>answered Mar 9 at 0:11
Temani AfifTemani Afif
82.1k104794
You need to set explicit width to your element. Acutally they are stretched by default.
If you remove the max-width you will have the following. Two eqaul columns where your element are stretched.
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>Adding max-width will simply restrict the width of the first element in its column
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
max-width:100px;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>And if you change the alignment you will get this:
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
align-items:flex-start;
.child1
background-color: green;
flex: 1 0 100%;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>You will see nothing because we removed the stretch alignment and there is no width defined.
Add some width to have the needed result:
.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
align-items:flex-start;
.child1
background-color: green;
flex: 1 0 100%;
width:20%;
.child2
flex: 1 0 20px;
background-color: yellow;
width:80%;
.child3
flex: 1 0 20px;
background-color: blue;
width:80%;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
max-width:100px;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
.child1
background-color: green;
flex: 1 0 100%;
max-width:100px;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
align-items:flex-start;
.child1
background-color: green;
flex: 1 0 100%;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
align-items:flex-start;
.child1
background-color: green;
flex: 1 0 100%;
.child2
flex: 1 0 20px;
background-color: yellow;
.child3
flex: 1 0 20px;
background-color: blue;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
align-items:flex-start;
.child1
background-color: green;
flex: 1 0 100%;
width:20%;
.child2
flex: 1 0 20px;
background-color: yellow;
width:80%;
.child3
flex: 1 0 20px;
background-color: blue;
width:80%;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>.flex
display: flex;
flex-flow: column wrap;
height: 100px;
border: 1px solid red;
align-items:flex-start;
.child1
background-color: green;
flex: 1 0 100%;
width:20%;
.child2
flex: 1 0 20px;
background-color: yellow;
width:80%;
.child3
flex: 1 0 20px;
background-color: blue;
width:80%;
<div class="flex">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>answered Mar 9 at 0:11
Temani AfifTemani Afif
82.1k104794
answered Mar 9 at 0:11
Temani AfifTemani Afif
82.1k104794
answered Mar 9 at 0:11
Temani AfifTemani Afif
82.1k104794
answered Mar 9 at 0:11
Temani AfifTemani Afif
82.1k104794
82.1k104794
add a comment |
add a comment |
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%2f55072620%2fflexbox-flex-direction-column-wrapped-child-not-positioned-correctly-when-on%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
