CSS: I am not able to see div inside the flex-CodePudding

I am not able to see details inside the flex div. I want to display Newyork inside that div. But due to flex, it is not getting displayed.

http://jsfiddle.net/1jxb0mp7/4/

    .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
    }

<body>
    sadasdsad
        <div >
            <div >
                <div >
                  <div >Newyork</div>
                </div>
                <div >
                  <div >Newyork</div>
                </div>
                <div >
                  <div  >Newyork</div>
                </div>
                <div >
                  <div>Newyork</div>
                </div>
                <div >
                  <div>Newyork</div>
                </div>
                <div >
                  <div>Newyork</div>
                </div>
                <div >
                  <div>Newyork</div>
                </div>
                <div >
                  <div>Newyork</div>
                </div>
            </div>
        </div>
    </body>

CodePudding user response：

The problem occurs from font-size: 0px;in your parent class. assign a font-size > 0px and you will see NewYork. font-size: 20px;

CodePudding user response：

I just added some font-size seems like its working and ad more css call for the div that doesnt have a class.

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

<body>
    sadasdsad
        <div >
            <div >
                <div >
                  <div >Newyork</div>
                </div>
                <div >
                  <div >Newyork</div>
                </div>
                <div >
                  <div  >Newyork</div>
                </div>
                <div >
                  <div>Newyork</div>
                </div>
                <div >
                  <div>Newyork</div>
                </div>
                <div >
                  <div>Newyork</div>
                </div>
                <div >
                  <div>Newyork</div>
                </div>
                <div >
                  <div>Newyork</div>
                </div>
            </div>
        </div>
    </body>

CodePudding user response：

Set z-index and font-size

.childDetails{
  height:50px!important;
  color:red;
  font-size:20px;
  z-index:999;
}