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;








3















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:
What I try to achieve
Here is the problem I am having:
enter image description here



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>












share|improve this question






























    3















    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:
    What I try to achieve
    Here is the problem I am having:
    enter image description here



    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>












    share|improve this question


























      3












      3








      3








      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:
      What I try to achieve
      Here is the problem I am having:
      enter image description here



      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>












      share|improve this question
















      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:
      What I try to achieve
      Here is the problem I am having:
      enter image description here



      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






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Mar 9 at 1:21









      Michael_B

      158k50255363




      158k50255363










      asked Mar 9 at 0:00









      yankoloyankolo

      3615




      3615






















          2 Answers
          2






          active

          oldest

          votes


















          2














          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>








          share|improve this answer

























          • 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



















          1














          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>








          share|improve this answer























            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


















            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









            2














            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>








            share|improve this answer

























            • 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
















            2














            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>








            share|improve this answer

























            • 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














            2












            2








            2







            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>








            share|improve this answer















            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>






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Mar 9 at 4:08

























            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


















            • 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














            1














            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>








            share|improve this answer



























              1














              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>








              share|improve this answer

























                1












                1








                1







                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>








                share|improve this answer













                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>






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Mar 9 at 0:11









                Temani AfifTemani Afif

                82.1k104794




                82.1k104794



























                    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














                    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





















































                    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







                    Popular posts from this blog

                    Identity Server 4 is not redirecting to Angular app after login2019 Community Moderator ElectionIdentity Server 4 and dockerIdentityserver implicit flow unauthorized_clientIdentityServer Hybrid Flow - Access Token is null after user successful loginIdentity Server to MVC client : Page Redirect After loginLogin with Steam OpenId(oidc-client-js)Identity Server 4+.NET Core 2.0 + IdentityIdentityServer4 post-login redirect not working in Edge browserCall to IdentityServer4 generates System.NullReferenceException: Object reference not set to an instance of an objectIdentityServer4 without HTTPS not workingHow to get Authorization code from identity server without login form

                    2005 Ahvaz unrest Contents Background Causes Casualties Aftermath See also References Navigation menue"At Least 10 Are Killed by Bombs in Iran""Iran"Archived"Arab-Iranians in Iran to make April 15 'Day of Fury'"State of Mind, State of Order: Reactions to Ethnic Unrest in the Islamic Republic of Iran.10.1111/j.1754-9469.2008.00028.x"Iran hangs Arab separatists"Iran Overview from ArchivedConstitution of the Islamic Republic of Iran"Tehran puzzled by forged 'riots' letter""Iran and its minorities: Down in the second class""Iran: Handling Of Ahvaz Unrest Could End With Televised Confessions""Bombings Rock Iran Ahead of Election""Five die in Iran ethnic clashes""Iran: Need for restraint as anniversary of unrest in Khuzestan approaches"Archived"Iranian Sunni protesters killed in clashes with security forces"Archived

                    Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme