FlexBox estou com um problema.

Não estou conseguindo deixar o primeiro filho( first child ), com 100% de largura.

Segue meu JSFiddle

HTML:

            <ul class="bloco-img">
                <li>
                    <a href="https://www.bmw.com">
                        <figure>
                            <img src="img/bmw.png" alt="Layout BMW">
                            <figcaption>BMW.com: reformulação do design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="https://www.uol.com">
                        <figure>
                            <img src="img/uol.png" alt="Layout Uol">
                            <figcaption>BMW.com: reformulação do design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="https://www.ibm.com">
                        <figure>
                            <img src="img/ibm.png" alt="Layout IBM">
                            <figcaption>BMW.com: reformulação do design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="https://www.g1.com">
                        <figure>
                            <img src="img/g1.png" alt="Layout G1">
                            <figcaption>BMW.com: reformulação do design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="https://www.uol.com">
                        <figure>
                            <img src="img/uol.png" alt="Layout Uol">
                            <figcaption>BMW.com: reformulação do design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </a>
                </li>
            </ul>

CSS:

.bloco-img{
  display: flex;
}
.bloco-img li{
    flex: 1;
    box-sizing: border-box;
    border: 8px solid #000;
    padding: 16px;
    margin: 0 16px 16px 0;
    background-color: #FFF;
}
.bloco-img li:first-child{
  width: 100%;
}
.bloco-img img{
   width: 100%;
    box-shadow: 0 0 4px #000;
}

Não estou conseguindo identificar o problema :/.