flex布局 高度没有自动撑到max-height

news2024/12/28 9:42:53

在做一个项目时,用到了竖向flex布局,我写了max-height: 820px, 但是到小屏幕时,只能撑到773px,解决方法是height: max-content.
在这里插入图片描述

在这里插入图片描述

但是不知道为什么只能撑到773px便撑不动了。
https://zhuanlan.zhihu.com/p/130460207 这个文档说的是父元素为flex且指定高度,孙子元素便无法撑开子元素的高度。我查了一下父元素,虽然都是flex,但是并没有写height或max-height。


然后就是我发现body的高度是789px, 而无法被撑开的元素父元素的高度也是789px,不知道是巧合,还是两者有什么相关。

我个人认为是这样的,横向flex布局时,会获取父元素的最大宽度然后进行布局,那么同理竖向flex会获取最大高度,由于所有的父元素要么height:100%要么没有写,直接获取到了最外层的高度作为最大高度来进行布局。(没测试,不保真)
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

workerman开发者必须知道的几个问题

1、windows环境限制 windows系统下workerman单个进程仅支持200个连接。 windows系统下无法使用count参数设置多进程。 windows系统下无法使用status、stop、reload、restart等命令。 windows系统下无法守护进程,cmd窗口关掉后服务即停止。 windows系统下无法在一个…

目标检测之损失函数

损失函数的作用为度量神经网络预测信息与期望信息(标签)的距离,预测信息越接近期望信息,损失函数值越小。 在目标检测领域,常见的损失分为分类损失和回归损失。 L1损失 L1 Loss也称为平均绝对值误差(MAE&…

[HNCTF 2022 WEEK4]ezheap

Index 前言Checksec & IDA 前言 手把手教学,覆盖一切途中会遇到的问题。 [HNCTF 2022 WEEK4]ezheap Checksec & IDA 保护全开,但是四肢健全(四项功能 增删改查),因此是ezheap。 主要来观察函数add和show。 d…

注意力机制:基于Yolov5/Yolov7的Triplet注意力模块,即插即用,效果优于cbam、se,涨点明显

论文:https://arxiv.org/pdf/2010.03045.pdf 本文提出了可以有效解决跨维度交互的triplet attention。相较于以往的注意力方法,主要有两个优点: 1.可以忽略的计算开销 2.强调了多维交互而不降低维度的重要性,因此消除了通道和权…

信号完整性分析基础知识之传输线和反射(三):仿真和测试反射波形

使用上面反射系数的定义,可以计算来自任意阻抗的反射信号。当终端阻抗为阻性元件时,阻抗恒定,反射电压容易计算。当终端具有更复杂的阻抗行为(例如电容性或电感性终端,或两者的某种组合)时,如果…

3.QT布局管理

布局管理系统 布局管理器 QLayout类继承图: 新建Qt Widgets项目mylayout,选择基类QWidget,类名MyWidget .ui拖用Font Combo Box、Text Edit,单击主界面,ctrlL,发现两个部件填满界面,运行后随…

Docker部署MySQL主从复制

文章目录 平台说明一、Docker创建网络二、创建MySQL主从容器1.拉取镜像2.查看镜像3.创建启动容器 三、主从配置1.主机配置文件2.从机配置文件3.注意事项4.重启容器5.连接主从数据库主机配置从机配置启动从机复制 四、测试主从复制 平台说明 操作系统:Windows 11 Do…

接口测试入门必会知识总结(学习笔记)

目录 什么是接口? 内部接口 外部接口 接口的本质 什么是接口测试? 反向测试 为什么说接口测试如此重要? 越接近底层的 Bug,影响用户范围越广 目前流行的测试模型 接口测试的优越性 不同协议形式的测试 接口测试工作场景…

『python爬虫』01. 爬虫入门的基础知识(保姆级图文)

目录 1. 合法性2. 爬虫原理3. 网站源代码查看4. 查看网络请求总结 欢迎关注 『python爬虫』 专栏,持续更新中 欢迎关注 『python爬虫』 专栏,持续更新中 1. 合法性 查看网站的爬虫协议,简单介绍爬虫协议robots.txt,避免爬虫爬的好…

简单理解内存分页机制

文章目录 1.CPU寻址方式2.段式内存访问的缺点3.80386两级页表4.PAE三级页表5.x64四级页表6.虚拟内存 思考一个问题:如果没有这样的分页机制时应用程序是怎么访问物理内存地址? 1.CPU寻址方式 Effective Address Base (Index * Scale) Displacement …

加载自己的图像数据集

文章目录 1 加载图像数据集2 图像预处理3 再次加载数据集4 这里还有一个问题,我们没有验证集5 构建DataLoader6 检查是否正确导入数据集 原文链接:《加载自己的图像数据集》 ​ 数据集下载链接 1 加载图像数据集 目录结构: 针对这种非常典型…

Java+proj4j实现根据EPSG编码进行坐标系转换

场景 JavaGeoTools实现WKT数据根据EPSG编码进行坐标系转换: JavaGeoTools实现WKT数据根据EPSG编码进行坐标系转换_霸道流氓气质的博客-CSDN博客 上面使用GeoTools实现坐标系转换。 VueOpenlayersproj4实现坐标系转换: VueOpenlayersproj4实现坐标系转换_霸道流…

VUE3页面div点击改变样式

如题目所示。 用上VUE之后,前后端分离,组件式开发,代码复用、独立性和隔离性都挺好,可维护性得以提高。相比之下,以前用jQuery,代码实在太多了。 不过,vue有个地方不大好,就是控制…

算法基础(二)(共有30道例题)

六、数据结构 (一)数组 定义:数组是存放在连续内存空间上的相同类型数据的集合。数组可以方便的通过下标索引的方式获取到下标下对应的数据。 注意: (1)数组下标都是从0开始的。 (2&#xff0…

【SWAT水文模型】SWAT水文模型建立及应用第二期:土地利用数据的准备(待更新)

SWAT水文模型建立及应用:土地利用数据的准备 1 简介2 土地利用数据的下载1.1 数据下载方式1.2 数据下载 2 土地利用数据的准备2.1 矢量转栅格2.2 土地利用类型的重分类2.3 土地利用分布图投影调整2.4 土地利用类型索引表建立 参考 SWAT水文模型建立及应用第一期主要…

前苹果设计总监创办,Humane想用AI+AR界面取代手机

在2001年,微软研究院一位工程师Gordon Bell开始了一段长时间的“生活记录”(Lifelogging)之旅,他会在胸前、头顶或是眼镜腿处佩戴相机,每30秒自动拍摄一张照片,以捕捉自己生命中的瞬间,记录下他…

数字化转型导师坚鹏:金融科技与保险公司转型

金融科技与保险公司转型 课程背景: 数字化背景下,很多保险公司存在以下问题: 不了解保险公司数转型现状、困惑与成功方法? 不清楚金融科技如何赋能保险公司数字化转型? 不了解保险公司数字化转型标杆企业成功案…

Linux系统上C程序的编译与调试

gcc分布编译链接: 预处理(Pre-Processing)编译(Compiling)汇编(Assembling)链接(Linking) gcc -E hello.c -o hello.i #预处理 gcc -S hello.i -o hello.s #编译 gcc -c…

ThingsBoard教程更新通知,规则节点全解析系列更新

前言 自从 《ThingsBoard系列教程》 专栏上线,我收到了很多读者的认同和肯定,这是我一直坚持分享的理由之一,做有价值的事,帮助他人。前段时间因为写书和学习的原因,ThingsBoard专栏已经4个月没更新。这就导致一些读者…

【点击查看】讯飞星火正在回答···

Hi,开发者: 关于世界,你有过什么样的疑问?每一次的提问,都代表着我们在关注什么,思考什么,好奇什么。世界的每一次更新,都始于一个新的提问。 我是讯飞星火认知大模型,…