Removed display: flex for lost-column in flex-mode

[subpixelch]

When lost is in flexbox mode the attribute display:flex for lost-column is not necessary. It breaks it's child-elements layouts because they change to flex-box. When the parent element is a flex-box (e.g. display: flex) it's child-elements are automatically set to flex-elements and they don't have to flex-box. There's no need to set them on display:flex as well - only if it's own childs should be flex-elements.

Example written in Stylus -> PostCSS

@lost gutter 30px;
@lost flexbox flex;

main
  lost-center: 800px
.s1
  lost-column: 1/2
.s2
  lost-column: 1/2

Actual output

main {
  display: flex;
  flex-flow: row wrap;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.s1, .s2{
  display: flex;
  flex: 0 0 auto;
  width: calc(99.99% * 1 - (30px - 30px * 1));
}

Expected output

main {
  display: flex;
  flex-flow: row wrap;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.s1, .s2{
  flex: 0 0 auto;
  width: calc(99.99% * 1 - (30px - 30px * 1));
}

<main>
  <div class="s1">
    <h1>lost-column without display:flex</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate neque libero porro nulla, sint fugit quas expedita molestias assumenda, sed ullam fugiat suscipit mollitia nostrum dolores, officiis odit ut rerum.</p>
  </div>
  <div class="s2">
    <h1>lost-column with display:flex</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto sit inventore, quisquam tempore nobis aspernatur quam mollitia asperiores, aliquam libero ullam quis veritatis est consequatur illo delectus, eligendi beatae dolor?</p>
  </div>
</main>

Resulting Screenshot with corrected (left) and actual generated CSS (right)