父元素flex:1 高度却被子元素撑开的问题

问题

当父元素设置了flex: 1; 的情况下,想在其中子元素超出父元素高度的情况下,产生滚动条,在父元素区域滚动。由于子元素高度不固定,故父元素设置为display: flex; flex-direction: column; 子元素设置flex: 1; overflow: auto;。但是遇到问题,当子元素高度超过父元素高度时,不会在父元素区域产生滚动条,而是超出了父元素区域,在上层产生了滚动条。

<div style="display: flex; height: 100px; width: 500px; border: red solid;"><div style="flex: 1; display: flex; flex-direction: column;">祖父元素<div style="flex: 1; display: flex; flex-direction: column; border: yellow solid;">父元素<div style="flex: 1; overflow: auto; border: blue solid;"><div>子元素</div><div>子元素</div><div>子元素</div><div>子元素</div><div>子元素</div><div>子元素</div><div>子元素</div><div>子元素</div><div>子元素</div><div>子元素</div></div></div></div></div>

在这里插入图片描述

解决方法 min-height: 0

给父元素设置 min-height: 0;

 <div style="min-height: 0; flex: 1; display: flex; flex-direction: column; border: yellow solid;">父元素</div>

在这里插入图片描述

问题原因

MDN Flex min-size
对于flex容器而言,其默认的min-widthmin-height都是auto,会在实际的高度和用户设置的高度二者之间选择最小值 。在上述情况下,并没有设置min-height,所以min-height会取实际的高度,即子元素的高度,所以父元素的高度其实也增加了。
对于子元素而言,父元素的高度就是其自身的高度,那么也不会触发滚动条。
所以并不是设置的flex:1;无效,而是父元素的min-height增大导致了此问题。

height: 0

给父元素设置height: 0;也同样可以解决这个问题。其原因在于,在高度计算中,会取min-heightheight中较小的那个。父元素设置了height: 0;之后,父元素的高度成了0,父元素的flex: 1; 使其占满整个可用空间,而子元素的高度超出了这个控件,所以产生了滚动条。
但是这不是问题产生的原因,只是一种解决方法。嗯嗯。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/659223.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java中的final关键字

一在哪些情况下使用final修饰&#xff1a; &#xff08;1&#xff09;当不希望类被继承时&#xff0c;可以用final修饰&#xff1b; &#xff08;2&#xff09;当不希望父类的某个方法被子类覆盖/重写时&#xff0c;可以用final关键字修饰&#xff1b; &#xff08;3&#x…

Unity触发检测Trigger踩坑合集

正常状态 绿色方块&#xff1a;刚体碰撞盒检测触发碰撞脚本 蓝色方块&#xff1a;碰撞盒 检测脚本&#xff1a; 正常进出&#xff1a; 踩坑1 绿色方块&#xff1a;刚体碰撞盒检测触发碰撞脚本 蓝色方块&#xff1a;碰撞盒 保持绿色和蓝色方块的接触 对蓝色方块&#xff1a…

如何使用Python实现WebScoket

大家好&#xff0c;后端开发领域迅速发展&#xff0c;需要满足今天应用程序多样化需求的协议。默认的HTTP协议设计用于无状态和短生命周期请求&#xff0c;但在需要实时交互的场景中&#xff08;如实时信令、聊天应用和协同编辑&#xff09;&#xff0c;它显然不够。 为了解决…

Python自动化测试框架整理,搭建框架看这篇就够了。。

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;薪资嘎嘎涨 什么是测试框架呢&#xff1f; 框架是一组准则&#xff0c;一个体系结构&#xff0c;遵循这些…

PHP微信UI在线聊天系统源码 客服私有即时通讯系统

(购买本专栏可免费下载栏目内所有资源不受限制,持续发布中,需要注意的是,本专栏为批量下载专用,并无法保证某款源码或者插件绝对可用,介意不要购买) DuckChat是一套完整的私有即时通讯解决方案,包含服务器端程序和各种客户端程序(包括iOS、Android、PC等)。通过Duck…

深入了解RabbitMQ:构建高效的消息队列系统

目录 1、RabbitMQ简介 1.1 什么是消息队列系统 1.2 RabbitMQ的概述 1.3 RabbitMQ的优势和适用场景

python查询xml类别

第一章 导包 import os from xml.etree.ElementTree import ElementTree第二章 存储类别 # 定义一个空集合用于存储类别 classes set()第三章 遍历所有XML文件 # 遍历指定目录下的所有XML文件 for filename in os.listdir(/home/li/PycharmProjects/Annotations):if filena…

kubeadm安装K8S_v1.28.x容器使用docker

一&#xff0e;环境部署 1.1 基础环境配置&#xff08;只有1台服务器&#xff0c;作为masrer&#xff0c;也作为node使用&#xff09; [rootecs-cf5e ~]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) [rootecs-cf5e ~]# uname -a Linux ecs-cf5e 3.10.0-11…

[ECE] Error Codes: Parity Bit and Cyclic Redundancy Check

当我们在数字通信中传输数据时&#xff0c;可能会发生错误&#xff0c;而错误检测码&#xff08;Error Codes&#xff09;是一种用于检测和纠正这些错误的技术。两种常见的错误检测码是奇偶校验位&#xff08;Parity Bit&#xff09;和循环冗余检测&#xff08;Cyclic Redundan…

LRU缓存(Leetcode146)

例题&#xff1a; 分析&#xff1a; 题目要求函数get和put要达到O(1)的时间复杂度&#xff0c;可以用 hashMap 来实现&#xff0c;因为要满足逐出最久未使用的元素的一个效果&#xff0c;还需要配合一个双向链表来共同实现。链表中的节点为一组key-value。 我们可以用双向链表来…

分割头篇 | 原创自研 | YOLOv8 更换 SEResNeXtBottleneck 头 | 附详细结构图

左图:ResNet 的一个模块。右图:复杂度大致相同的 ResNeXt 模块,基数(cardinality)为32。图中的一层表示为(输入通道数,滤波器大小,输出通道数)。 1. 思路 ResNeXt是微软研究院在2017年发表的成果。它的设计灵感来自于经典的ResNet模型,但ResNeXt有个特别之处:它采用…

FileZilla 的安装与使用

目录 一. FileZilla 是什么二. FileZilla 的安装1. 下载 FileZilla2. 安装 三. FileZilla 的使用 一. FileZilla 是什么 FileZilla 是一个免费的开源 FTP&#xff08;文件传输协议&#xff09;客户端软件&#xff0c;用于在计算机之间传输文件。它提供了一个直观的用户界面&am…

SV-9032 机架式ip网络采播器

SV-9032是深圳锐科达电子有限公司的一款机架式网络采播器&#xff0c;具有10/100M以太网接口&#xff0c;后面板上有一组AUX音源输入和一组6.35mm接口的麦克风输入&#xff0c;可以直接连接音源输出设备或麦克风&#xff0c;将采集音源编码后发送至网络播放终端上。同时还具有三…

数据结构之生成树及最小生成树

数据结构之生成树及最小生成树 1、生成树概念2、最小生成树 数据结构是程序设计的重要基础&#xff0c;它所讨论的内容和技术对从事软件项目的开发有重要作用。学习数据结构要达到的目标是学会从问题出发&#xff0c;分析和研究计算机加工的数据的特性&#xff0c;以便为应用所…

Springboot+vue的健身房管理系统(有报告)。Javaee项目,springboot vue前后端分离项目

演示视频&#xff1a; Springbootvue的健身房管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的健身房管理系统&#xff0c;采用M&#xff08;model&#xf…

【SparkML系列2】DataSource读取图片数据

DataSource(数据源) 在本节中&#xff0c;我们将介绍如何在机器学习中使用数据源加载数据。除了一些通用的数据源&#xff0c;如 Parquet、CSV、JSON 和 JDBC 外&#xff0c;我们还提供了一些专门用于机器学习的数据源。 ###Image data source&#xff08;图像数据源&#xf…

配置nginx以成功代理websocket

配置nginx以成功代理websocket 在使用socket.io的时候遇到这样一个问题&#xff1a;websocket接收的消息的顺序错位了&#xff0c;然后看了一下浏览器的console的报错&#xff0c;提示连接到ws失败&#xff0c;然后在浏览器的开发者工具的网络中看了一下ws对应的消息里面报错&…

RabbitMQ概念

一 、RabbitMQ概念 1 架构图 2 相关概念 Publisher - ⽣产者&#xff1a;发布消息到RabbitMQ中的Exchange Consumer - 消费者&#xff1a;监听RabbitMQ中的Queue中的消息 Broker&#xff1a;接收和分发消息的应用&#xff0c;RabbitMQ Server就是 Message Broker&#xf…

循环——枚举算法2(c++)

目录 找和为K的两个元素 描述 在一个长度为n(n < 1000)的整数序列中&#xff0c;判断是否存在某两个元素之和为k。 输入 第一行输入序列的长度n和k&#xff0c;用空格分开。 第二行输入序列中的n个整数&#xff0c;用空格分开。 输出 如果存在某两个元素的和为k&…

Oracle PL/SQL Programming 第4章:Language Fundamentals 读书笔记

总的目录和进度&#xff0c;请参见开始读 Oracle PL/SQL Programming 第6版 本章介绍两种类型的 PL/SQL 控制语句&#xff1a;条件控制语句和顺序控制语句。 几乎您编写的每一段代码都需要条件控制&#xff0c;即根据条件指导程序执行流程的能力。 您可以使用 IF-THEN-ELSE 和…