css子盒子撑开父盒子溢出情况

最新推荐文章于 2024-07-28 01:07:16 发布
最新推荐文章于 2024-07-28 01:07:16 发布
阅读量878 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/who_become_gods/article/details/118408117
版权
这段代码展示了如何使用CSS Flexbox创建一个滚动的布局。`.box`元素设置了固定宽度和高度，并使用`overflow`属性处理溢出。`.left`部分使用`flex: 1`占据剩余空间，而`.right`部分设置了`width`和`min-height`，其高度通过`fit-content`适应内容。当`.left`的内容过多时，会出现横向滚动条。
摘要由CSDN通过智能技术生成

在这里插入图片描述

属性 height: fit-content;  有时候也可以设置width (前提是没有设置width 写死)

在这里插入图片描述

<!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>
</head>
<style>
.box{
    width: 400px;
    height: 600px;
    background: yellow;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
}
.left{
    flex: 1;
    background: red;
    /* overflow: hidden; */
}
.right{
    width: 200px;
    min-height: 200px;
    background: forestgreen;
    height: fit-content;
}
</style>
<body>
    <div class="box">
        <div class="left">
            <ul>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
                <li>111111111111</li>
            </ul>>
        </div>
        <div class="right">
            <ul>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
                <li>1111111111111111</li>
            </ul>
        </div>
    </div>
</body>
</html>
who_become_gods
关注
新增标签未顶格显示（子盒子内容超出父盒子引起的bug）
sinat_38944746的博客
11-24 546
子盒子超出父盒子引起的bug
html行高与父div一样,CSS子元素跟父元素的高度一致的实现方法
weixin_29961459的博客
06-17 1919
这篇文章主要介绍了CSS子元素跟父元素的高度一致的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧绝对定位方法：(1)将父元素设置为相对定位，不写父元素的高度时，会随着左边的子元素高度变化而变化.parent {/*关键代码*/position: relative;/*其他样式*/width: 800px;color: ...
css盒子模型、元素溢出
不会修电脑的程序猿
09-07 1884
css基本语法 css的定义方法是： 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例： div{ width:100px; height:100px; color:red } css页面引入方法 1、外联式：通过link标签，链接到外部样式表到页面中。 内容和样式分离，推荐...
flex-grow: 1 导致的滚动内容无限撑开父容器（嵌套 flex 导致 overflow: auto 失效）| 左右布局右边元素被挤出屏幕
qq_41567818的博客
07-28 400
这个问题主要是 flex-grow: 1 引起的，这个概念可以搜索“Intrinsic and Extrinsic Sizing”以深入了解浏览器对于内容大小的计算机制逻辑。简单来说，就是 flex-grow: 1 启用时，该元素会无限“贪婪”的吃掉剩余的空间，并且尽可能的多容纳内部元素，他会不断向上检查，直到碰到了一个“固定大小”的元素，才会停止“贪婪”。
关于 flex 布局时，子元素宽度超出父元素问题及解决方案（问题）
热门推荐
weixin_60547084的博客
03-20 1万+
这个是我在项目中遇到的一个bug，使用的 flex 布局，由于我动态的修改绿色盒子的显示与隐藏，导致两边盒子的挤压。先看效果图，大家可以看一下下面的样式，很明显左边和右边的盒子我是给的定宽，但是被挤压了。很明显，红色的盒子没有300px。
子盒子溢出父盒子
weixin_44953664的博客
05-16 1343
https://www.jianshu.com/p/2843ff850ff6
CSS-子盒子撑开父盒子，让父盒子的高随内容自适应
weixin_30401605的博客
02-10 2415
方法一： height:auto!important;height:200px;min-height:200px; ie6并不支持min-height。ie7,opera,火狐没有问题。 方法二： 在浮动的容器后面，父容器结束之前加入一个空的div，并清除浮动。 <div class="father"> 　　<div class="son"&...
css给父盒子加display:inline实现子盒子自动撑开 实现子盒子和父盒子都浮动
延宾的博客
05-05 3483
无标题文档 .box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;} .div{ width:200px;height:200px;background:red;float:left;} /*     清浮动     1.给父级也加浮动     2.给父级加display:inlin
css拓展--盒子高度塌陷问题及其解决方法
zxn200125的博客
10-13 588
盒子高度塌陷问题及其解决方法
css盒子模型实验报告总结_CSS盒子模型知识总结
weixin_39781143的博客
12-19 691
前言2020年春招开始，作为一个前端菜鸟，我也想在春招找到一份比较好的实习，为我的秋招助力这篇文章是我在面试之前css盒子模型的知识进行的总结正片一、基本概念CSS将页面中所有的元素都设置成一个矩形盒子，每个盒子都由以下几个部分组成：内容区(content)：元素中所有子元素和文本内容都在内容区中排列，width和height均为内容区的属性内边距(padding):内容区和边框之间的距离，会影响...
【前端】HTML5+CSS3 CSS盒子模型（三)
YOH9778的博客
08-20 445
文章目录1、文档流（normal flow）2.盒子模型---介绍3.盒子模型---边框4.盒子模型---内边距5.盒子模型-外边距6.盒子的水平布局7.盒子的垂直布局10.默认样式11.盒子的尺寸12.轮廓和圆角 1、文档流（normal flow） 网页是一个多层的结构，一层摞着一层，通过CSS可以为每一层来设计样式，作为用户只能看到最顶上的一层，而在这些层中，最底下的一层成为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列的 对我们而言，元素主要有两个特点：在文档流中，不在文档
CSS-盒子高度塌陷的解决办法
O3O_O3O_的博客
11-10 717
高度塌陷的原因：当前盒子没有高度，且内部元素脱离文档流，导致没有元素可以撑起盒子。（当元素设置了浮动或者绝对，固定定位时，都会导致元素脱离文档流） 解决办法： 给盒子设置高度 为盒子添加一个不脱离文档流的子元素，让这个子元素将盒子撑起 解决浮动带来的高度塌陷： 创建BFC： 设置父元素overflow属性为非默认值 (即除了visible之外的值，如：hidden/auto/scroll） 但设置此属性可能会导致一些问题，当值为auto时可能会出现滚动条；值为hidde...
前端学习之CSS---盒子模型、溢出属性、元素显示类型
weixin_45258154的博客
04-30 679
盒子模型、溢出属性、元素显示类型 一、盒子模型常见特性和问题 1、内边距 在给div设置了padding以后，div的高度和宽度会计算content本身加上padding的大小 padding : 30px 一个值的时候四周全部设置，两个值先上下后左右，三个值就是上 左右 下，四个值上 右 下 左 padding:top right bottom left 不支持负值   2、边框 设置了边框以后，div的高度和宽度计算也会加上边框的大小 border:10px solid red粗细-样式
CSS学习笔记五---盒子模型 & 溢出属性
Flora_hsx的博客
07-24 446
学习笔记五
解决子盒子把父盒子撑破问题
mrhuanhuan的博客
08-04 4392
场景： <div class="demo">(父盒子) <div class="box"></div>（子盒子） </div> 当你设置子盒子的padding和border的时候就会把父盒子撑破，因为子盒子的宽度是100%,而浏览器的默认盒模型为content-box（即内容为其的宽度） 1.利用box-sizing属性。 原理：...
子盒子浮动，父盒子清除浮动高度内容撑开
weixin_45397914的博客
07-17 284
     清除浮动的方法本质分为两种，一种为额外标签法，一种父盒子加overflow。 额外标签法又有两种情况。 父级盒子加一个空元素 <div class="father"> <div class="son"></div> <div class="son"></div> <div class="clearfix"></div> </div&
给子盒子设置padding值是不会撑开父盒子的
qq_37621289的博客
09-25 6144
最开始有如下一张图 大标题看起来离下边框太近了，所以想利用h4标签的padding-bottom将它们的距离调得远一些。现在就是有一个疑问，如果将h4的padding-bottom设置成10px,那大盒子会不会被撑大呢。测试结果如下所示： 没有设置padding时，父盒子和子盒子的大小如下： 给h4标签添加padding-bottom:10px;属性之后，显示结果如下： 可以看到父盒子的...
关于前端的学习思考-父子盒子溢出问题
2302_79248254的博客
12-02 504
很明显，大盒子高度设置400px，小盒子都是高度设置成300px，明显400px<600px，这时候子盒子就会溢出。如图我们看到box1变得很大，是基于body的宽度变化，box2由于是标准流，所以box1覆盖了box2，使得看不到box2。发现并不会溢出，因为相当于两个子盒子高度相加=父盒子高度。再次发散思维，三个盒子如果至少有一个浮动，至少有一个绝对定位。摆结论：三个盒子如果至少有一个浮动，也会遵循子盒子高度相加溢出盒子这个规律。2、块级元素为父盒子，浮动元素为子盒子。父盒子都会带着子盒子移动。
css父盒子自适应子盒子高度
最新发布
09-11
CSS中父盒子自适应子盒子高度的情况，可以通过多种方法实现，具体方法取决于父盒子和子盒子之间的关系，以及布局的具体要求。以下是几种常见的实现方式： 1. 使用`display: flex;`属性：当父容器使用Flexbox布局时，子元素可以轻松地填充父容器的高度，因为Flexbox布局天然支持这种自适应高度的特性。 ```css .parent { display: flex; flex-direction: column; } .child { /* 子元素样式 */ } ``` 2. 使用`display: grid;`属性：类似于Flexbox，CSS Grid布局同样支持子元素自适应父元素的高度。 ```css .parent { display: grid; } .child { /* 子元素样式 */ } ``` 3. 使用`height: 100%;`属性：如果子盒子必须是父盒子的直接子元素，并且父盒子的高度已经确定，可以使用`height: 100%;`来让子盒子的高度和父盒子一样。 ```css .child { height: 100%; } ``` 需要注意的是，如果父容器没有指定高度，直接使用`height: 100%;`是无法达到效果的，因为`100%`的高度是相对于父容器的高度，而此时父容器的高度是未知的。 4. 使用视口单位（如`vh`）：如果父容器的高度是由视口决定的，可以使用视口单位来设置父容器的高度。 ```css .parent { height: 100vh; /* 100%的视口高度 */ } .child { /* 子元素样式 */ } ``` 5. 使用CSS的`calc()`函数：在某些情况下，可以通过`calc()`函数计算父容器的高度，使其等于子容器的高度。 ```css .parent { height: calc(100% - /* 子盒子的margin或其他元素的高度 */); } .child { /* 子元素样式 */ } ``` 选择哪种方法取决于具体的布局需求和浏览器兼容性考虑。在实际应用中，可能需要结合多种CSS特性来满足复杂布局的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值