JSFiddle - React, Tailwind, and code Playground

by yijiang

HTML

<p>Webkit browsers seem to create an erroneous width on overflow:hidden divs inside of overflow:hidden divs, when their width is set to 0. Firefox shows a more logical behaviour here.</p>
<div class="section">
    <div class="content" style="width: 0;">some content that should not affect this div's width.</div>
</div>
<p>When the inner div has a with >= 1px, behaviour is consistent.</p>
<div class="section">
    <div class="content" style="width: 1px;">some content that should not affect this div's width.</div>
</div>

CSS

div {
    overflow: hidden;
    float: left;
    height: 50px;
}

div.section {
    background-color: green;
}

div.section div.content {
    background-color: red;
}

p {
    clear: both;
}