登录
当前位置： 首页 > 知识库问答 >
问题：

高度为100%的Div溢出到其父级下方的flexbox行[重复]

齐招
2023-03-14

我在flexbox数组中有一系列元素。每个元素都包含一张“卡片”，其高度各不相同。当我试图让卡片占据它们所在的flexbox子元素的剩余空间时，它们会溢出到下面一行的元素中。如果我指定所有flex子项都是100%高度，那么它们的高度实际上会折叠为它们内部卡的大小。

#flex_parent {
  margin: 1em;
  display: flex;
  flex-wrap: wrap;
}

.flex-child {
  box-sizing: border-box;
  margin-bottom: 1em;
  width: 50%;
}

.full-height {
  height: 100%;
  background: #99F !important;
}

.child-description {
  height: 100%;
}


/* cosmetic */

body {
  background: black;
  color: white;
}

h4 {
  color: red;
}

.flex-child {
  border: 1px dotted red;
}

.child-card {
  background: #FFA;
  color: #000;
}
<body>
  <div id="flex_parent">
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card full-height">
        <div class="child-description">
          <p>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card full-height">
        <div class="child-description">
          <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card full-height">
        <div class="child-description">
          <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card full-height">
        <div class="child-description">
          <p>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123</p>
        </div>
      </div>
    </div>
  </div>
</body>

蓝色卡片的高度为100%。从字面上看，它们的高度是父母的100%，但这意味着它们会溢出。

我怎样才能让他们只扩展到他们父母的底部呢？

共有1个答案

丌官运诚
2023-03-14

对使用flex。flex-child然后添加flex-grow:1 到子类。

添加flex-grow:1 当弯曲方向时：列 将强制元素占据容器的剩余高度。

#flex_parent {
  margin: 1em;
  display: flex;
  flex-wrap: wrap;
}

.flex-child {
  box-sizing: border-box;
  width: 50%;
  display: flex;
  flex-direction: column;
}

.child-description {
  height: 100%;
}


/* cosmetic */

body {
  background: black;
  color: white;
}

h4 {
  color: red;
}

.flex-child {
  border: 1px dotted red;
}

.child-card {
  background: #FFA;
  color: #000;
  flex-grow: 1;
}

.full-height {
  background: #99F !important;
}
<div id="flex_parent">
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card full-height">
      <div class="child-description">
        <p>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card full-height">
      <div class="child-description">
        <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card full-height">
      <div class="child-description">
        <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card full-height">
      <div class="child-description">
        <p>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123</p>
      </div>
    </div>
  </div>
</div>

 类似资料：
  • 最大高度的子级：100%溢出父级

    我试图理解我的意外行为： 容器中有一个最大高度为100%的元素，该容器也使用了最大高度，但意外的是，子元素溢出了父元素： 测试用例：http://jsfiddle.net/bq4Wu/16/ 但是，如果为父级指定了明确的高度，则这是固定的： 测试用例：http://jsfiddle.net/bq4Wu/17/ 有人知道第一个例子中孩子为什么不尊重父母的最大身高吗？为什么需要明确的高度？

  • 如何在不指定父级高度的情况下强制子级div为父级div的高度的100％？

    问题内容： 我有一个具有以下结构的网站： 导航在左侧，内容div在右侧。内容div的信息是通过PHP获取的，因此每次都不同。 无论加载哪个页面，如何垂直缩放导航使其高度与内容div的高度相同？ 问题答案： 注意 ：此答案适用于不支持Flexbox标准的旧版浏览器。 我建议您看看使用Cross-Browser CSS和NoHacks的等高列。 基本上，以与浏览器兼容的方式使用CSS做到这一点并不是一

  • 如何使浮动div的父级高度为100％？

    问题内容： 这是HTML： 这是CSS： 使用Chrome开发人员工具检查后，内部div的高度为0px。 我如何强制其为父div高度的100％？ 问题答案： 为了使高度基于其内容并基于其高度，使两个元素都绝对定位。 可以在css height属性的规范中找到更多详细信息，但本质上，如果的height为，则必须忽略height ， 除非_绝对定位。然后，高度将为0， _除非 将其自身绝对定位。 但是

  • flexbox列子项的高度为100％[重复]

    问题内容： 我在flexbox列上遇到了麻烦，因为flex’d元素的子元素无法以百分比响应。我仅在Chrome浏览器中进行了检查，据我了解，这只是Chrome浏览器的问题。这是我的示例： HTML CSS 我想要它，以便红色填充蓝色。为什么不起作用？ 问题答案： TL; DR： 设置为，并摆脱on 。[您可以在此处查看修改后的CodePen。] 工作原理： 我从这个类似的问题中学到，根据flexb

  • 使DIV具有100%的父DIV而不知道父DIV的高度并保持其响应[重复]

    我有这样的代码： 这个CSS： 我想使等于。不幸的是，我不知道为什么。我试着上网，尝试了不同的解决方案，比如

  • CSS flexbox溢出100%宽度元素

    在鼠标悬停时，我想变换两个相邻的flex元素的位置，如下图所示 标记如下 我希望两个元素都是父元素的100%宽度，第二个元素溢出，这样我就可以在鼠标悬停时变换X。我遇到的问题是两个元素都被挤压到容器中。 我知道我可以在另一个div中包装这两个元素，并给它200%的容器宽度。但想知道这能不能用Flexbox完成

相关问答

Flexbox子项溢出父项使div（高度）占据父级剩余高度Chrome/Safari未填充flex父级的100%高度将子div高度限制为父容器高度[重复]Chrome中的Flexbox容器不能获得100%高度[重复]

相关文章

最大身高的孩子：100％溢出父母Word自动换行链接，以免溢出其父div宽度使div（高度）占据父级剩余高度如何使Flexbox子代的父母身高达到100％？Twitter Bootstrap：容器中的div高度为100％

相关阅读

高精度计算的应用最高响应比下（HRRN）调度示例华为笔试9月20日100+100+90CSS宽度和高度MySQL数据库的全局锁、表级锁和行级锁的全面深度解析

相关工具

FineCMS高级版动态调整UITableViewCell的高度FlexBoxflexbox-layout​React-Flexbox-Grid

相关文档

JavaScript 高级的知识点前端开发从基础到高级React 高级教程具有高级安全性的 Windows 防火墙Go 语言高级编程
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.