使用flex防止fit-content子元素冲出父元素宽度的方法
父元素设置了min-width:fit-content后，其宽度由子元素的宽度来决定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
background: lightgray;
}
.container {
width: 400px;
height: 200px;
min-width: fit-content;
}
.header {
height: 50px;
background: red;
}
.body {
width: 500px;
height: 150px;
background: lightblue;
}
</style>
</head>
<body> <div class="container">
<div class="header"></div>
<div class="body"> </div> </div>
</body>
</html>
看到父元素的宽度被body元素顶开了。
如果不想子元素顶开父元素宽度，而是将子元素的最大宽度设定为父元素的原始宽度，应该使用flex包裹子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
background: lightgray;
}
.container {
width: 400px;
height: 200px;
min-width: fit-content;
}
.header {
height: 50px;
background: red;
}
.body {
width: 500px;
height: 150px;
background: lightblue;
}
</style>
</head>
<body> <div class="container">
<div class="header"></div> <div style="display: flex;height: 100%;">
<div style="flex-grow: 1; width: 0">
<div class="body"> </div>
</div>
</div> </div>
</body>
</html>
使用flex防止fit-content子元素冲出父元素宽度的方法的更多相关文章
- 子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题
方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...
- JS子元素oumouseover触发父元素onmouseout
原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...
- 子元素z-index高于父元素兄弟元素z-index被遮挡问题
问题:最近在写样式时,遇到一个这样的问题,子元素的z-index值大于父元素兄弟元素z-index值,结果子元素超出父元素部分被父元素兄弟元素遮挡解决:将父元素的z-index值设置为大于兄弟元素z- ...
- 二、vue学习--父元素如何获取子元素的值，子元素如何获取父元素的值
下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...
- js进阶 11-8 jquery如何获取元素相对于父元素的位置
js进阶 11-8 jquery如何获取元素相对于父元素的位置 一.总结 一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset ...
- ie6下子元素撑大父元素
今天遇到了一个问题.在给a元素定义hover并且增大尺寸时,IE6下该元素会把父元素撑大,而非IE浏览器则是表现为溢出效果不会撑大父元素(我想要的效果).解决IE6的这个问题是采用了一个定位+负边距的 ...
- parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合。
parent([expr]) 概述 取得一个包含着所有匹配元素的唯一父元素的元素集合.大理石构件 你可以使用可选的表达式来筛选. 参数 exprStringV1.0 用来筛选的表达式 示例 描述: 查 ...
- 关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案
以下是个人学习笔记,仅供学习参考. 1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题. 在给没有margin-top-b ...
- 【css】子元素浮动到了父元素外，父元素没有随子元素自适应高度，如何解决？
正常情况 如果子元素没有设置浮动(float),父元素的高度会随着子元素高度的改变而改变的. 设置浮动以后 父元素的高度不会随着子元素的高度而变化. 例如:在一个ul中定义若干个li,并设置float ...
随机推荐
- 如何使用 Javascript 将图标字体渲染为图片
前言 在软件开发中肯定要用到图标,比如下图的 Groove 音乐中就用到了许多图标.一种获取这些图标的方法是把 Groove 音乐截个图,然后熟练地开启 Photoshop,开始抠图.这种方式很逊,效 ...
- CTFHub-HTTP协议五关刷题解答
CTFHub 开箱即用的CTF学习解决方案 地址:https://www.ctfhub.com/#/skilltree 本次解答一共包括五关,没有先后顺序. 1.技能树一:请求方式 题目描述 打开后得 ...
- vmware 虚拟机系统双屏或更多屏
确保 VMware Workstation 软件已打开,且目标虚拟机已关机 编辑 > 首选项 > 显示 > 自动适应,确保 自动适应窗口.自动适应客户机 已勾选,点击 确定 保存 右 ...
- Spring Boot 3.0.0 M3、2.7.0发布，2.5.x将停止维护
昨晚(5月19日),Spring Boot官方发布了一系列Spring Boot的版本更新,其中包括: Spring Boot 3.0.0-M3 Spring Boot 2.7.0 Spring Bo ...
- 143. Reorder List - LeetCode
Question 143. Reorder List Solution 题目大意:给一个链表,将这个列表分成前后两部分,后半部分反转,再将这两分链表的节点交替连接成一个新的链表 思路 :先将链表分成前 ...
- 02-C高级编程
Day01 笔记 1 typedef使用 1.1 起别名 - 简化struct关键字 1.2 区分数据类型 1.3 提高代码移植性 2 void使用 2.1 不可以利用void创建变量 无法给无类型变 ...
- MOS管实现的STC自动下载电路
目录 MOSFET, MOS管基础和电路 MOS管实现的STC自动下载电路 三极管配合 PMOS 管控制电路开关 STC MCU在烧录时, 需要断电重置后才能进入烧录状态, 通常是用手按开关比较繁琐. ...
- 2021.03.13【NOIP提高A&B组】模拟 总结
T1 题目大意:从原点开始循环执行命令,问最后的位置 好吧这就是一道幼儿园的周期问题,模拟即可 #include<bits/stdc++.h> using namespace std; c ...
- 借助SpotBugs将程序错误扼杀在摇篮中
背景 最近一年多在一家toB业务的公司,部门主要做的是建筑行业的招投标业务信息化,希望借助软件来达到"阳光.降本.提效"的目的,我刚入职时大概30多家客户,截止现在已经超过100家 ...
- 技术分享 | app自动化测试（Android）--App 控件定位
原文链接 客户端的页面通过 XML 来实现 UI 的布局,页面的 UI 布局作为一个树形结构,而树叶被定义为节点.这里的节点也就对应了要定位的元素,节点的上级节点,定义了元素的布局结构.在 XML 布 ...