html - Is it possible to have a DIV fit responsive content of an unknown size in a grid? -

i'm trying create responsive css grid following specifications:

• responsive
• content blocks left aligned
• content wrapper fits content blocks (this part may not possible)
• content wrapper vertically , horizontally centered
• pure css

i have following code:

* {    padding: 0;    margin: 0;    line-height: 1;    box-sizing: border-box;  }    .tiles,  .tile,  .tile {    padding: 10px;  }    body {    background: blue;  }    .tiles {    display: flex;    flex-flow: flex;    flex-wrap: wrap;    background: red;    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);  }    .tile {    height: 100px;    width: 100px;    background: green;  }    .tile {    display: block;    height: 100%;    background: yellow;  }

<div class="tiles">      <div class="tile">      <a>item</a>    </div>      <div class="tile">      <a>item</a>    </div>      <div class="tile">      <a>item</a>    </div>      <div class="tile">      <a>item</a>    </div>      <div class="tile">      <a>item</a>    </div>      <div class="tile">      <a>item</a>    </div>      <div class="tile">      <a>item</a>    </div>      <div class="tile">      <a>item</a>    </div>      <div class="tile">      <a>item</a>    </div>      <div class="tile">      <a>item</a>    </div>      <div class="tile">      <a>item</a>    </div>      <div class="tile">      <a>item</a>    </div>      <div class="tile">      <a>item</a>    </div>      <div class="tile">      <a>item</a>    </div>    </div>

i've tried flex , floats, can't container div (.tiles - red) resize content when window resized.

is possible without javascript @ all?

thanks!