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

ops/2025/1/17 0:26:39/

一、问题
遇到个样式问题,当父级元素设置了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.ppmy.cn/ops/150673.html

相关文章

C++实现设计模式---工厂方法模式 (Factory Method)

工厂方法模式 (Factory Method) 工厂方法模式是一种创建型设计模式,提供一个创建对象的接口,让子类决定实例化哪个类,从而实现了对对象创建过程的解耦和扩展。 意图 定义一个用于创建对象的接口,允许子类决定具体实例化哪个类。…

编译pytorch——cuda-toolkit-nvcc

链接 https://blog.csdn.net/wjinjie/article/details/108997692https://docs.nvidia.com/cuda/cuda-installation-guide-linux/#switching-between-driver-module-flavorshttps://forums.developer.nvidia.com/t/can-not-load-nvidia-drivers-on-ubuntu-22-10/239750https://…

Docker常用命令大全

Docker容器相关命令: 创建并启动容器: docker run:创建一个新的容器并运行一个命令。例如:docker run -d -p 8080:80 nginx这将后台(-d)运行一个Nginx容器,并映射宿主机的8080端口到容器的80端口。 列出容器&#x…

ajax与json

目录 1、ajax1.1、什么是ajax1.2、ajax核心AJAX 工作原理示例代码重要属性和方法兼容性 1.3、jQuery ajax什么是jQuery ajaxjQuery AJAX 核心概念基本用法1. **使用 $.ajax() 方法**2. **使用简化方法****使用 $.get() 方法****使用 $.post() 方法** 常用配置选项示例&#xff…

Termora 一个开源的 SSH 跨平台客户端工具

Termora 是一个终端模拟器和 SSH 客户端,支持 Windows,macOS 和 Linux。 功能特性 支持 SSH 和本地终端支持 SFTP 文件传输支持 Windows、macOS、Linux 平台支持 Zmodem 协议支持 SSH 端口转发支持配置同步到 Gist支持宏(录制脚本并回放&…

c++ 手写queue循环队列

继承与多态 继承 父子出现同名的成员问题 #include <iostream>using namespace std; //父子类中出现重名成员 //定义一个父类 class Father{ public:string name; protected:int pwd; private:int money; public:Father(){cout<<"Father::构造"<&l…

从玩具到工业控制--51单片机的跨界传奇【2】

咱们在上一篇博客里面讲解了什么是单片机《单片机入门》&#xff0c;让大家对单片机有了初步的了解。我们今天继续讲解一些有关单片机的知识&#xff0c;顺便也讲解一下我们单片机用到的C语言知识。如果你对C语言还不太了解的话&#xff0c;可以看看博主的C语言专栏哟&#xff…

如何通过 Zero Trust 模型防止内外部威胁?

随着网络攻击方式的不断演化&#xff0c;传统的安全防护措施逐渐暴露出明显的不足。无论是企业内部员工的操作失误&#xff0c;还是外部黑客的精心策划&#xff0c;传统的“边界防御”模式已不再能够有效地应对日益复杂的网络威胁。为了应对这些挑战&#xff0c;Zero Trust&…