0

I have a JSFiddle here ->http://jsfiddle.net/7vupcegh/8/ As you can see, i have used height property in container class. 

<code>
.container {
  display: flex;
  flex-flow: column wrap;
  height: 200px;
}
</code>

My output should look the same as it is showing in JSFiddle above. Only thing is if i remove this height property, the format of the entire page changes. How can i achieve the same layout structure without having to define height for the container.

user3019647
  • 133
  • 3
  • 13
  • 2
    If you remove the height, then it will just go to the default height of the text inside all the numbered boxes. You kinda have the define the height somewhere if you want something to have a specific height. – Chris Barr Aug 02 '19 at 17:44
  • 1
    A flex column has to know **when** to wrap...and that involves a calculatable height. – Paulie_D Aug 02 '19 at 17:51
  • Agree with CBarr and Paulie_D. Only possible solution I see is a "fake" with absolute/fixed position: http://jsfiddle.net/4vqmb3pa/ But I think this is not what you are looking for, since it's not exact the same result and it "ignores" other elements... – schogges Aug 02 '19 at 18:18
  • I believe that CSS Grid might work better in this scenario since the height is undefined. The same behavior can be reproduced very easily. [https://codepen.io/npfries/pen/oKGxZy] – Nathan Fries Aug 02 '19 at 19:44

0 Answers0