使用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 ...
随机推荐
- 论文解读（SAGPool）《Self-Attention Graph Pooling》
论文信息 论文标题:Self-Attention Graph Pooling论文作者:Junhyun Lee, Inyeop Lee, Jaewoo Kang论文来源:2019, ICML论文地址:d ...
- .NET 中 GC 的模式与风格
垃圾回收(GC)是托管语言必备的技术之一.GC 的性能是影响托管语言性能的关键.我们的 .NET 既能写桌面程序 (WINFROM , WPF) 又能写 web 程序 (ASP.NET CORE),甚 ...
- 提升站点SEO的7个建议
1.使用HTTPS 谷歌曾发公告表示,使用安全加密协议(HTTPS),是搜索引擎排名的一项参考因素. 所以,在域名相同情况下,HTTPS站点比HTTP站点,能获得更好的排名. 在网络渠道分发或合作上, ...
- 【mq】从零开始实现 mq-12-消息的批量发送与回执
前景回顾 [mq]从零开始实现 mq-01-生产者.消费者启动 [mq]从零开始实现 mq-02-如何实现生产者调用消费者? [mq]从零开始实现 mq-03-引入 broker 中间人 [mq]从零 ...
- 好客租房56-props深入（3props校验-约束规则）
1常见类型:Array,bool,func,number,object,string 2React:element 3必填项:isRequred 4特定结构的想:shape({}) //导入react ...
- 好客租房7-React脚手架的使用
3.3在脚手架中使用React //第一步导入react import React from "React" import ReactDOM from "react-do ...
- python之模块(hashlib、logging)
hashlib模块 加密的概念 加密,是以某种特殊的算法改变原有的数据,当其他人获得数据时,也无法了解数据的内容.简单的来说,就是将明文(人看得懂)数据通过一些手段变成密文数据(人看不懂),密文数据的 ...
- Vben Admin 源码学习:项目初始化
0x00 前言 Vue-Vben-Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案考. 本系列本着学习参考的目 ...
- Linux下添加MySql组件后报无权限问题解决
Tomcat日志报错如下: Caused by: java.sql.SQLException: Access denied for user 'root'@'localhost' (using pas ...
- 一文带你搞懂 SSR
欲语还休,欲语还休,却道天凉好个秋 ---- <丑奴儿·书博山道中壁>辛弃疾 什么是 SSR ShadowsocksR?阴阳师?FGO? Server-side rendering (SS ...