Html div溢出其父div的问题

 .resources {
        display: flex;
        background-color: #000000;
        margin-top: 1vh;
        padding: 8px 8px 0px 8px;
        flex-direction: column;
        border-radius: 5px;
    }



    .resources .resource {
        width: 100%;
        height: auto;
        display: flex;
        margin: auto;
        margin-bottom: 8px;
        cursor: pointer;
        background-color: #010101;
        padding: 5px 5px 5px 5px;
        border-radius: 5px;
    }



    .resources .resource .icon {
        width: 4vh;
        height: 4vh;
        border-radius: 5px;
        margin: auto;
    }
    
    .resources .resource .text {
        text-align: left;
        margin-left: 5px;
        float: left;
        
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 90%;
    }
    
    .resources .resource .text h6 {
        font-size: 13px;
        color: #ffffff;
    }
    
    .resources .resource .text p {
        font-size: 12px;
        color: #ffffff;
    }

<div class="resources">
      <div class="resource">
          <img class="icon" src="...">
             <div class="text">
              <h6>title</h6>
              <p>lorem ipsum</p>
            </div>
      </div>
</div>