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

news/2025/1/15 21:41:16/

在做一个项目时,用到了竖向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.ppmy.cn/news/51572.html

相关文章

【IT 常识】安装(Install)、部署(Deploy)、搭建(Setup)和配置(Configure、Set)的区别

文章目录 前言安装、部署与搭建Install vs. Setup/Set upInstall vs. DeploySetup/Set up vs. Deploy 设置与配置Set vs. ConfigureSetting vs. Configuration vs. Option 前言 在平时工作中,我们并没有严格区分 安装(Install)、部署&#x…

java——文件管理与输入输出

数据如何进行持久化存储? 使用文件进行存储。 面向对象程序是如何完成数据的持久化存储? 面向对象程序是通过流将数据保存到文件的。 什么是流? 是指同一台计算机或网络中不同计算机之间有序运动着的数据序列。Java把这些不同来源和目标的数据…

oracle统计信息详解

收集oracle统计信息 优化器统计范围: 表统计; --行数,块数,行平均长度;all_tables:NUM_ROWS,BLOCKS,AVG_ROW_LEN;列统计; --列中唯一值的数量(N…

Java题目训练——反转部分单向链表和猴子分桃

一、反转部分单向链表 题目描述: 给定一个单链表,在链表中把第 L 个节点到第 R 个节点这一部分进行反转。 输入描述: n 表示单链表的长度。 val 表示单链表各个节点的值。 L 表示翻转区间的左端点。 R 表示翻转区间的右端点。 输出描述&…

nginx常用配置说明

1.nginx设置访问白名单 在 Nginx 中设置白名单可以通过以下步骤实现: 创建一个文本文件,用于存储白名单 IP 地址。例如,可以创建一个名为 whitelist.txt 的文件,并将允许访问的 IP 地址逐行添加到该文件中,每个 IP 地…

HDCTF

Welcome To HDCTF 2023 看源码找到game.js 找到这一串 放到控制台运行即可 SearchMaster 题目让post提交一个data 随便传一个在页面执行了 当传入{时他会报错,看报错信息发现 Smarty,猜测Smarty的ssti,数据发送到前端 用{if}标签即可 {…

FPGA学习笔记(三):PLL 锁相环

在 FPGA 芯片内部集成了 PLL(phase-locked loop,锁相环),可以倍频分频,产生其它时钟类型。PLL 是 FPGA 中的重要资源,因为一个复杂的 FPGA 系统需要不同频率、相位的时钟信号,一个 FPGA 芯片中 PLL 的数量是衡量 FPGA …

Java中的异常处理机制

1. 异常机制存在的必要性 首先明确,程序一旦发生异常,如果没有被处理,程序就会非正常终止。 紧接着来看一段代码,在以下代码中,以为对数组进行了越界访问,导致程序运行中断,提前结束。导致后面…