首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

高度为100％的Div溢出到其父级下的flexbox行

作者：顺丰-03_457 | 来源：互联网 | 2022-10-11 22:33
如何解决《高度为100％的Div溢出到其父级下的flexbox行》经验，为你挑选了1个好方法。

我在flexbox数组中有一系列元素。每个元素包含一个“卡”，其高度不同。当我尝试使卡占据它们所居住的flexbox子元素的剩余空间时，它们会溢出到下面一行的元素中。如果我指定所有flex-children的高度均为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;
}

  

    

      
Title title title

      

        

          
123 123

        

      

    

    

      
Title title title

      

        

          
123 123
123 123

        

      

    

    

      
Title title title

      

        

          
123 123
123 123

        

      

    

    

      
Title title title

      

        

          
123 123
123 123
123 123
123 123
123 123

        

      

    

    

      
Title title title

      

        

          
123 123
123 123
123 123
123 123
123 123

        

      

    

    

      
Title title title

      

        

          
123 123

        

      

    

    

      
Title title title

      

        

          
123 123
123 123

        

      

    

    

      
Title title title

      

        

          
123 123
123 123
123 123
123 123
123 123

        

      

    

    

      
Title title title

      

        

          
123 123
123 123
123 123
123 123
123 123

        

      

    

    

      
Title title title

      

        

          
123 123

蓝色的卡片高度为100％。实际上，它们是其父代的高度的100％，但这意味着它们会溢出。

我如何让他们只扩展到其父母的底部？



1> Nidhin Josep..：

使用flex了.flex-child，然后添加flex-grow: 1;到子类。

添加 flex-grow: 1;时间flex-direction: column;将迫使元素占据容器的剩余高度。

#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;
}

  

    
Title title title

    

      

        
123 123

      

    

  

  

    
Title title title

    

      

        
123 123
123 123

      

    

  

  

    
Title title title

    

      

        
123 123
123 123

      

    

  

  

    
Title title title

    

      

        
123 123
123 123
123 123
123 123
123 123

      

    

  

  

    
Title title title

    

      

        
123 123
123 123
123 123
123 123
123 123

      

    

  

  

    
Title title title

    

      

        
123 123

      

    

  

  

    
Title title title

    

      

        
123 123
123 123

      

    

  

  

    
Title title title

    

      

        
123 123
123 123
123 123
123 123
123 123

      

    

  

  

    
Title title title

    

      

        
123 123
123 123
123 123
123 123
123 123

      

    

  

  

    
Title title title

    

      

        
123 123

推荐阅读
  • html

    深入理解CSS盒模型与box-sizing属性

    本文详细介绍了W3C标准盒模型和IE传统盒模型的区别，探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析，帮助读者更好地理解和应用这一关键概念。 ... [详细]
  • html

    次小生成树问题的高效求解

    本文探讨了如何通过最小生成树（MST）来计算严格次小生成树。在处理过程中，需特别注意所有边权重相等的情况，以避免错误。我们首先构建最小生成树，然后枚举每条非树边，检查其是否能形成更优的次小生成树。 ... [详细]
  • html

    Docker的安全基准

    Docker的安全基准
    nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]
  • html

    QUIC协议：快速UDP互联网连接

    QUIC协议：快速UDP互联网连接
    QUIC（Quick UDP Internet Connections）是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP，并结合了TLS级别的安全性，提供了更高效、更可靠的互联网通信方式。 ... [详细]
  • html

    技术分享：从动态网站提取站点密钥的解决方案

    技术分享：从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥，特别是针对验证码（reCAPTCHA）的处理方法。通过结合Selenium和requests库，提供了详细的代码示例和优化建议。 ... [详细]
  • html

    Linux 自动化安装脚本详解

    本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建，还处理了系统服务的配置和启动，确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • html

    分页插件3指定到某一页

    前言--页数多了以后需要指定到某一页（只做了功能，样式没有细调）html ... [详细]
  • html

    在Linux系统中配置并启动ActiveMQ

    在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ，包括端口开放及防火墙设置。通过本文，您可以掌握完整的ActiveMQ部署流程，确保其在网络环境中正常运行。 ... [详细]
  • html

    如何在WPS Office for Mac中调整Word文档的文字排列方向

    如何在WPS Office for Mac中调整Word文档的文字排列方向
    本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤，用户可以轻松更改文本的水平或垂直排列方式，以满足不同的排版需求。 ... [详细]
  • html

    存储器层次结构、随机访问存储器与数据存取机制

    理解存储器的层次结构有助于程序员优化程序性能，通过合理安排数据在不同层级的存储位置，提升CPU的数据访问速度。本文详细探讨了静态随机访问存储器（SRAM）和动态随机访问存储器（DRAM）的工作原理及其应用场景，并介绍了存储器模块中的数据存取过程及局部性原理。 ... [详细]
  • html

    几何画板展示电场线与等势面的交互关系

    几何画板展示电场线与等势面的交互关系
    几何画板是一款功能强大的物理教学软件，具备丰富的绘图和度量工具。它不仅能够模拟物理实验过程，还能通过定量分析揭示物理现象背后的规律，尤其适用于难以在实际实验中展示的内容。本文将介绍如何使用几何画板演示电场线与等势面之间的关系。 ... [详细]
  • html

    使用Windows批处理脚本监控并重启Java应用程序

    本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序，确保其持续稳定运行。脚本每30分钟检查一次，并在需要时重启Java程序。同时，它会将任务结果发送到Redis。 ... [详细]
  • html

    MySQL中枚举类型的所有可能值获取方法

    MySQL中枚举类型的所有可能值获取方法
    本文介绍了一种在MySQL数据库中查询枚举（ENUM）类型字段所有可能取值的方法，帮助开发者更好地理解和利用这一数据类型。 ... [详细]
  • html

    Hadoop入门与核心组件详解

    Hadoop入门与核心组件详解
    本文详细介绍了Hadoop的基础知识及其核心组件，包括HDFS、MapReduce和YARN。通过本文，读者可以全面了解Hadoop的生态系统及应用场景。 ... [详细]
  • html

    掌握Java EE的全面指南

    探讨如何真正掌握Java EE，包括所需技能、工具和实践经验。资深软件教学总监李刚分享了对毕业生简历中常见问题的看法，并提供了详尽的标准。 ... [详细]
author-avatar
顺丰-03_457
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有