2

Please see the example attached.

i need the following:

  • have a column layout. flex-direction:column;
  • have a wrap break-point after child 2.
  • all childs must be directly descendant of parent container.

Currently i can achieve this by specifying explicit height to the container. for example: height:100px.

however, i don't want to do this. i want the second child take as height as it needs to have (by the content), and the third child to follow on the second column.

thanks.

.flex-container {
 display: flex;
 flex-flow: column wrap;
}
.child {padding: 0.5em;background: rgba(0,0,255,0.15);}
<div class="flex-container">
 <div class="child one">Child One</div>
 <div class="child two">Child Two</div>
 <div class="child three">Child Three</div>
  <div class="child four">Child Four</div>
</div>
Asons
  • 84,923
  • 12
  • 110
  • 165
LiranC
  • 2,400
  • 1
  • 27
  • 55
  • 2
    You can't unless you set a fixed height on the flex container. With a fixed height you could do something like this: https://stackoverflow.com/a/45827123/2827823 – Asons Aug 24 '17 at 12:46
  • Firefox can do this `.child.two { page-break-after: always; /* CSS 2.1 syntax */ break-after: always; /* New syntax */ }` – Asons Aug 24 '17 at 12:51
  • page-break-after is not relevant to flexbox, am i correct? if i am wrong, can you demonstrate with code? – LiranC Aug 24 '17 at 13:00
  • Check last sample in this answer, and use Firefox: https://stackoverflow.com/a/29733127 – Asons Aug 24 '17 at 13:22

0 Answers0