当父级元素设置了flex 布局 ,两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决 (css 样式问题)

一、问题
遇到个样式问题,当父级元素设置了flex 布局 ,两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决 (拖拽浏览器 使页面变小)

二、解决方法

	.father{min-height: 600px;width: 100%;display: flex;gap: 12px;&-left {flex: 1;min-width: 0; // 关键代码 设置最小宽度和最大宽度 可以防止子元素溢出max-width: calc(50% - 6px); // 关键代码 设置最小宽度和最大宽度 可以防止子元素溢出}&-right {flex: 1;min-width: 0; // 关键代码 设置最小宽度和最大宽度 可以防止子元素溢出max-width: calc(50% - 6px); // 关键代码 设置最小宽度和最大宽度 可以防止子元素溢出}}

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

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

相关文章

MLX90640自制热像仪(四) LVGL UI界面设计 移植 SquareLine Studio

SquareLine Studio 1.5.0是一款LVGL图形化的软件,LVGL官方的软件,针对这个软件我们主要做的除了开发,就是移植到自己的板端,过程中会遇到各种各样的问题。 下面附上源代码: // This file was generated by SquareLine…

hadoop3.3和hive4.0安装——单节点

hadoop3.3x和hive4.0安装部署 为什么我要安装hive4.0,因为阿里云镜像只有hive4.0 软件相互兼容性版本 系统centos7 uname -a如果内核3.0以上可以用 安装jdk1.8以上的版本(配置好环境变量) hadoop3.3.x与hive4.0.x 创建目录 mkdir -p /us…

09.VSCODE:安装 Git for Windows

在 Windows 下安装著名的源代码管理工具:git。 git 工具两大作用: 管理我们自己的源代码获取他人(开源的)源代码 当前我们更需要第2点。 为什么要安装 git 一、 得到更多库 之前课程中我们安装了 msys2,从而可以通…

《银行保险机构数据安全管理办法》正式实施,分类分级、安全评估共筑安全防线

金融数据具有高价值和高敏感性,金融数据安全关乎国家安全和金融消费者权益密切相关。在当前数字化进程加速的背景下,数据合作频繁,安全风险也随之增加,给机构管理带来了新挑战。 为规范银行业保险业数据处理活动,保障数…

CV(10)--目标检测

前言 仅记录学习过程,有问题欢迎讨论 目标检测 object detection,就是在给定的图片中精确找到物体所在位置,并标注出物体的类别;输出的是分类类别label物体的外框(x, y, width, height)。 目标检测算法&#xff1a…

Nginx 如何设置 Upgrade-Insecure-Requests 报头 ?

Upgrade-Insecure-Requests 报头是一种 web 浏览器向服务器发出信号的机制,它倾向于接收安全 (HTTPS) 资源。添加此报头有助于在受支持的浏览器上将不安全的请求升级为安全的请求。 Step 1: 定位 Nginx 配置 主 nginx 配置文件通常位于 /etc/nginx/nginx.conf特定…

3.Qt Quick-QML地图引擎之v4.3版本(新增动态轨迹线/海图/天地图街道/天地图卫星)

在上个版本Qt Quick-QML地图引擎之v4版本(新增多模型切换/3D模型欧拉角模拟)_qt加载3d地图-CSDN博客更新了3D模拟功能,在4.3版本增加动态轨迹线、三个地图(海图/天地图街道/天地图卫星)。 4.3版本已经支持qt6 cmake版本,而4.3版本以下支持qt5版本&#x…

Linux-----线程操作(创建)

目录 创建线程 示例&#xff1a; 创建线程 #include <pthread.h>/*** 创建一个新线程* * pthread_t *thread: 指向线程标识符的指针,线程创建成功时,用于存储新创建线程的线程标识符* const pthread_attr_t *attr: pthead_attr_t结构体,这个参数可以用来设置线程的属性…

我要成为算法高手-DFS篇

目录 题目1&#xff1a;计算布尔二叉树的值题目2&#xff1a;求根节点到叶子结点数字之和题目3&#xff1a;二叉树剪枝题目4&#xff1a;验证二叉搜索树题目4&#xff1a;二叉搜索树中第 K 小的元素题目5&#xff1a;二叉树的所有路径 题目1&#xff1a;计算布尔二叉树的值 23…

学习threejs,使用FlyControls相机控制器

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.FlyControls 相机控制…

Life Long Learning(李宏毅)机器学习 2023 Spring HW14 (Boss Baseline)

1. 终身学习简介 神经网络的典型应用场景是,我们有一个固定的数据集,在其上训练并获得模型参数,然后将模型应用于特定任务而无需进一步更改模型参数。 然而,在许多实际工程应用中,常见的情况是系统可以不断地获取新数据,例如 Web 应用程序中的新用户数据或自动驾驶中的…

Multi-Agent如何设计

文章小结 研究背景和目的 在单一大语言模型长期主导人工智能领域的背景下&#xff0c;多智能体系统在对话任务解决中逐渐崭露头角。 虽然先前的研究已经展示了多智能体系统在推理任务和创造性工作中的潜力&#xff0c;但对于其在对话范式方面的局限性以及单个智能体的影响&am…

(即插即用模块-Attention部分) 四十四、(ICIP 2022) HWA 半小波注意力

文章目录 1、Half Wavelet Attention2、代码实现 paper&#xff1a;HALFWAVELET ATTENTION ON M-NET FOR LOW-LIGHT IMAGE ENHANCEMENT Code&#xff1a;https://github.com/FanChiMao/HWMNet 1、Half Wavelet Attention 传统的图像增强方法主要关注图像在空间域的特征信息&am…

SpringBoot+Lombok项目实体属性名xXxx格式,前端接收不到

问题解析 今天发现后端传给前端的实体类中&#xff0c;有属性为xXxxx格式的&#xff0c;前端也使用相同名称接收&#xff0c;结果却不显示值&#xff01;研究了一会发现接口请求回来后&#xff0c;原xXxxx的属性名&#xff0c;会被转为全小写。具体原因为&#xff1a;使用Lombo…

Spring Boot教程之五十五:Spring Boot Kafka 消费者示例

Spring Boot Kafka 消费者示例 Spring Boot 是 Java 编程语言中最流行和使用最多的框架之一。它是一个基于微服务的框架&#xff0c;使用 Spring Boot 制作生产就绪的应用程序只需很少的时间。Spring Boot 可以轻松创建独立的、生产级的基于 Spring 的应用程序&#xff0c;您可…

网络安全——常用语及linux系统

一、网络安全概念及法规 网络安全&#xff1a;网络空间安全 cyber security 信息系统&#xff1a;由计算机硬件、网络和通信设备、计算机软件、信息资源、信息用户和规章制度组成的已处理信息流为目的的人机一体化系统 信息系统安全三要素&#xff08;CIA&#xff09; 保密…

Windows 正确配置android adb调试的方法

下载适用于 Windows 的 SDK Platform-Tools https://developer.android.google.cn/tools/releases/platform-tools?hlzh-cn 设置系统变量&#xff0c;路径为platform-tools文件夹的绝对路径 点击Path添加环境变量 %adb%打开终端输入adb shell 这就成功了&#xff01;

如何优化Elasticsearch大文档查询?

记录一次业务复杂场景下DSL优化的过程 背景 B端商城业务有一个场景就是客户可见的产品列表是需要N多闸口及各种其它逻辑组合过滤的&#xff0c;各种闸口数据及产品数据都是存储在ES的(有的是独立索引&#xff0c;有的是作为产品属性存储在产品文档上)。 在实际使用的过程中&a…

使用 WPF 和 C# 将纹理应用于三角形

此示例展示了如何将纹理应用于三角形,以使场景比覆盖纯色的场景更逼真。以下是为三角形添加纹理的基本步骤。 创建一个MeshGeometry3D对象。像往常一样定义三角形的点和法线。通过向网格的TextureCoordinates集合添加值来设置三角形的纹理坐标。创建一个使用想要显示的纹理的 …

探索 Transformer²:大语言模型自适应的新突破

目录 一、来源&#xff1a; 论文链接&#xff1a;https://arxiv.org/pdf/2501.06252 代码链接&#xff1a;SakanaAI/self-adaptive-llms 论文发布时间&#xff1a;2025年1月14日 二、论文概述&#xff1a; 图1 Transformer 概述 图2 训练及推理方法概述 图3 基于提示的…