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?

3
  • 3
  • Based on that post. Its a known issue that hasn't been fixed in every major browser?
    – maxfridbe
    Mar 10, 2016 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. Mar 12, 2016 at 17:14

1 Answer 1

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>

1
  • 8
    It seems like the OP wants them to wrap, but have the container expand to contain them.
    – showdev
    Jun 7, 2019 at 20:35

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.