5

I have some boxes of the same width, but of different heights (depending on their content — they are notes of title+text), and a container of auto height (willing to scroll). The idea is to distribute the notes in the container across the columns, so that it looks like Google Keep. For now I am using flexbox rows, but I'm loosing space:

example with flexbox rows

My current CSS looks like:

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  padding: 10px;
}
.note {
  flex-basis: 50%;
}
.note>div {
  margin: 10px;
}

The problem is that if I switch to flex-direction: column, because of the height: auto of my flexbox container, the notes make only one column, because they don't see any reason to wrap. Calculating the container's height in Javascript would be quite hard to do without rendering the notes first (and I'm using React...) Am I missing something here?

Here is the result I'm looking to achieve:

enter image description here

I don't want to use jQuery, and I'd love to avoid Javascript...

Antoine
  • 5,504
  • 5
  • 33
  • 54
  • Are you missing something? No, as you said,...if the column doesn't have a definite height it has no *reason* to wrap. – Paulie_D Apr 01 '16 at 23:01
  • I know, I'm looking for a way to make them wrap... – Antoine Apr 01 '16 at 23:02
  • Then a height has to be involved...even if it's 100vh...something. Otherwise you are looking at a JS solution. – Paulie_D Apr 01 '16 at 23:03
  • 1
    Alternatively, abandon flexbox and consider CSS Columns – Paulie_D Apr 01 '16 at 23:04
  • Problem is, with flexboxes, if for example I set the height to 100vh, if there are too many notes to fit in, the extra ones will be ignored and not shown... I looked at CSS columns also, but it breaks my blocks into pieces of text – Antoine Apr 01 '16 at 23:06
  • With CSS columns it does not keep my notes (blocks) intact (not split), or did I miss the way to wrap only notes, not content, with css columns? – Antoine Apr 01 '16 at 23:08
  • I'll try this: http://stackoverflow.com/a/8507148/1052033 – Antoine Apr 01 '16 at 23:09
  • CSS columns indeed are a good solution! Thanks :) – Antoine Apr 01 '16 at 23:47

1 Answers1

11

I ended up abandoning flexboxes and used columns instead:

.container {
  column-count: 3;
  column-gap: 0;
  padding: 10px;
}
.note {
  display: inline-block; /* important to wrap notes not content */
  width: 100%;
}
.note>div {
  margin: 10px;
}

Use inline-block notes, and don't hide the overflow.

enter image description here

Antoine
  • 5,504
  • 5
  • 33
  • 54