Create an arrangement of two columns with a vertically expanding container

Question

I would like to create a two-column layout (CSS only, no javascript).

There are several requirements that make this difficult:

• The container starts at a certain height (e.g. 200px)
• There are two columns
• Items fill column 1, then if more space is required fill column 2.
• If column 1 and column 2 are full, then expand the height of the container.

A detailed example is here .

Bad

Good

Elements first fill column 1:

Then the elements fill column 2:

When the minimum height of the container is reached, the container expands and the elements are aligned between two columns:

Answer 1

flexbox , flex-direction row. , , – ( LTR), , .

flex-direction: column , .

– , (, Pinterest) – flexbox.

Answer 2

Flexbox + CSS ...

http://codepen.io/simshanith/pen/ZLLvGB?editors=1100

HTML:

<div class="container">
  <div class="columns">
    <div class="item">1</div>
    <!-- etc. -->
  </div>
</div>

CSS

.container {
  background: rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  min-height: 200px;
  width: 600px;
}

.columns {
  column-count: 2;
  column-gap: 0;
  flex: 1;
}

.item {
  display: block;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid blue;
  width: 100%;
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}

200px. CSS , .