3

I have this scenario:

https://jsfiddle.net/b6zcdgf7/

.container{
  display:flex;
  height:3em;
  border:solid thin blue;
}
.section{
  border:solid thin gray;
  display:flex;
}
.section.horiz{
  
}

.section.vert{
  flex-direction:column;
  flex-wrap: wrap;
}

.box{
  border:solid thin red;
  width:1em;
  height:1em;
}
<div class="container">
  <div class="section horiz">
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="section horiz">
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="section horiz">
    <div class="box"></div>
  </div>
  <div class="section vert">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

When using .section.vert the .box elements overflow the section.

Is there anything i can do to prevent having to set a width on the .section.vert element?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
maxfridbe
  • 5,872
  • 10
  • 58
  • 80
  • 3
    Possible duplicate of [When flexbox items wrap in column mode, container does not grow its width](http://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width) – Michael Benjamin Mar 10 '16 at 15:24
  • Based on that post. Its a known issue that hasn't been fixed in every major browser? – maxfridbe Mar 10 '16 at 17:47
  • 1
    Yes, it is a known issue and, to the best of my knowledge, there is currently no natural fix. See my answer in the dupe. I posted links to many other questions similar to yours. No solution provided anywhere. It's strange because all browsers behave the same, which suggests this is not a bug. Maybe there's a technical reason (such as implementation difficulty) for this deficiency. – Michael Benjamin Mar 12 '16 at 17:14

1 Answers1

0

Change the flex-wrap to nowrap

.section.vert{
  flex-direction:column;
  flex-wrap: nowrap;
  outline: 3px dashed green;

}

Fiddle

Snippet

.container{
  display:flex;
  height:3em;
  border:solid thin blue;
}
.section{
  border:solid thin gray;
  display:flex;
}
.section.horiz{
  
}

.section.vert{
  flex-direction:column;
  flex-wrap: nowrap;
  outline: 3px dashed green;

}

.box{
  border:solid thin red;
  width:1em;
  height:1em;
}
<div class="container">
  <div class="section horiz">
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="section horiz">
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="section horiz">
    <div class="box"></div>
  </div>
  <div class="section vert">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>
zer00ne
  • 41,936
  • 6
  • 41
  • 68