JSFiddle - React, Tailwind, and code Playground

by Frank Liu

HTML

<div>
    <item-zxx>最小100px，总是填满容器。</item-zxx>
    <item-zxx class="shrink">最小100px，总是填满容器。</item-zxx>
    <item-zxx>最小100px，总是填满容器。</item-zxx>
    <item-zxx>最小100px，总是填满容器。</item-zxx>
</div>

CSS

div {
    display: flex;
    /* flex-wrap: wrap; */
}
item-zxx {
    padding: 1em;
    border: 1px solid deepskyblue;
    color: deepskyblue;
    outline: 1px dashed #fff;
    box-sizing: border-box;
    
    flex-basis: 200px;
    flex-grow: 1;
}

.shrink {
   flex-shrink: 1;
}