div溢出其父div的问题答案

【问题标题】：Issue with div overflowing out of its parent divdiv溢出其父div的问题
【发布时间】：2022-08-08 01:24:52
【问题描述】：

我正在用 HTML 和 CSS 制作一些“卡片”，并且我有一个容器，又名。家长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>

基本上一切正常。这是我所知道的：

但是子卡（资源）的末尾与父 div（资源）重叠，我不希望它溢出，我希望它具有相等的填充并留在父 div 中。就像是：

希望这对任何提前提供帮助的人都有意义并感谢。

标签： html css

【解决方案1】：

您只需要从.resources .resource 中删除margin:auto 和width:100%，如下所示。红色边框只是为了有一些视觉效果。

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

【讨论】：

【解决方案2】：

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

.resources .resource {
  height: auto;
  display: flex;
  cursor: pointer;
  background-color: #010101;
  padding: 5px;
  border-radius: 5px;
}

.resources .resource .icon {
  width: 4vh;
  height: 4vh;
  border-radius: 5px;
  margin: auto;
}

.resources .resource .text {
  margin-left: 5px;
  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>

【讨论】：