Flex wrap width bug

Some workaround

by Alexander Shutov

HTML

<div class="container">
    <div class="vertical-container"> 
        <span class="item">1</span>
        <span class="item">2</span>
        <span class="item">3</span>
        <span class="item">4</span>
        <span class="placeholder"></span>
    </div>
    <div class="center"></div>
</div>
<div class="error">Red container's width doesn't change</div>

CSS

.container {
    align-items: stretch;
    animation: container-height 10s infinite;
    background-color: black;
    display: flex;
    flex-direction: row;
    height: 7em;
    width: 10em;
}
.vertical-container {
    align-items: stretch;
    background-color: red;
    display: flex;
    flex: none;
    flex-direction: column;
    flex-wrap: wrap;
}
.item {
    align-items: center;
    background-color: blue;
    box-shadow: 0 0 1em black inset;
    color: white;
    display: inline-flex;
    flex: none;
    height: 3em;
    justify-content: center;
    position: relative;
    width: 3em;
}
.placeholder {
    align-items: center;
    background-color: yellow;
    box-shadow: 0 0 1em black inset;
    color: white;
    display: inline-flex;
    flex: 1;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 3em;
}
.center {
    background-color: green;
    height: 100%;
    opacity: 0.5;
    width: 100%;
}
.error {
    color: red;
}
@keyframes container-height {
    0 { height: 7em; }
    50% { height: 14em; }
    100% { height: 7em; }
}