CSS flex布局下div内文本Newyork无法显示如何解决

flex布局容器div内部的Newyork文本无法正常展示，配置flex相关属性后内容始终不可见。

复现代码 #

CSS部分 #

.parent {
    display: flex;
    font-size: 0;
    flex-wrap:wrap;
    margin:-10px 0 0 -10px;
}
.child {
    color: red;
    display: inline-block;
    background: blue;
    margin: 10px 0 0 10px;
    height: 100px;    
    width: calc(100% * (1/4) - 10px - 1px)
}
.childDetails{
  height:50px!important
}

HTML部分 #

<body>
    sadasdsad
        <div class="parent-wrapper">
            <div class="parent">
                <div class="child">
                  <div class="childDetails">Newyork</div>
                </div>
                <div class="child">
                  <div class="childDetails">Newyork</div>
                </div>
                <div class="child">
                  <div  class="childDetails">Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
            </div>
        </div>
    </body>

文本不可见和flex布局属性无关，核心原因是父容器.parent设置了font-size: 0，该属性会被所有后代元素继承，而现有代码的子元素没有单独重设字体大小，导致内部文本字号为0，视觉上完全看不到。
font-size: 0一般用于清除inline-block元素之间的默认空白间隙，flex布局的子项不存在这类间隙问题，不需要加这个属性。

二选一即可：

• 方法1：直接删除.parent样式里的font-size: 0，从根源避免字号继承异常
• 方法2：给子元素显式设置正常可读的字号，例如在.child样式中新增font-size: 16px;配置，覆盖继承的0字号
  修复后的.child样式参考：

.child {
    color: red;
    display: inline-block;
    background: blue;
    margin: 10px 0 0 10px;
    height: 100px;    
    width: calc(100% * (1/4) - 10px - 1px);
    font-size: 16px;
}

内容的提问来源于stack exchange，提问作者Pratik Bhoir