Issue with div overflowing out of its parent div

April 3, 2022

I’m making some "cards" in HTML and CSS and I have a container, aka. a parent 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>

Basically everything works just fine. This is what I have know:

However the end of the child card (resource) overlaps the parent div (resources) and I don’t want it to overflow, I want it to have equal padding and stay in the parent div. Something like :

Hope this makes sense and thx to anyone that helps in advance.

>Solution :

You just need to remove margin:auto and width:100% form .resources .resource, like so (the red border is just to have some visual)

.resources {
    display: flex;
    background-color: #000000;
    margin-top: 1vh;
    padding: 8px 8px 0px 8px;
    flex-direction: column;
    border-radius: 5px;
}
.resources .resource {
    height: auto;
    display: flex;
    margin-bottom: 8px;
    cursor: pointer;
    background-color: #010101;
    padding: 5px 5px 5px 5px;
    border-radius: 5px;
  border:1px solid red;
}
.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="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80">
             <div class="text">
              <h6>title</h6>
              <p>lorem ipsum</p>
            </div>
      </div>
</div>