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

最新推荐文章于 2023-03-20 10:27:33 发布
最新推荐文章于 2023-03-20 10:27:33 发布
阅读量852 收藏
点赞数
版权声明：本文为博主原创文章，遵循 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
新增标签未顶格显示（子盒子内容超出父盒子引起的bug）
sinat_38944746的博客
11-24 534
子盒子超出父盒子引起的bug
前端学习之CSS---盒子模型、溢出属性、元素显示类型
weixin_45258154的博客
04-30 644
盒子模型、溢出属性、元素显示类型 一、盒子模型常见特性和问题 1、内边距 在给div设置了padding以后，div的高度和宽度会计算content本身加上padding的大小 padding : 30px 一个值的时候四周全部设置，两个值先上下后左右，三个值就是上 左右 下，四个值上 右 下 左 padding:top right bottom left 不支持负值   2、边框 设置了边框以后，div的高度和宽度计算也会加上边框的大小 border:10px solid red粗细-样式
CSS-子盒子撑开父盒子，让父盒子的高随内容自适应
weixin_30401605的博客
02-10 2389
方法一： height:auto!important;height:200px;min-height:200px; ie6并不支持min-height。ie7,opera,火狐没有问题。 方法二： 在浮动的容器后面，父容器结束之前加入一个空的div，并清除浮动。 <div class="father"> 　　<div class="son"&...
css盒子模型、元素溢出
不会修电脑的程序猿
09-07 1872
css基本语法 css的定义方法是： 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例： div{ width:100px; height:100px; color:red } css页面引入方法 1、外联式：通过link标签，链接到外部样式表到页面中。 内容和样式分离，推荐...
子盒子溢出父盒子
weixin_44953664的博客
05-16 1335
https://www.jianshu.com/p/2843ff850ff6
css给父盒子加display:inline实现子盒子自动撑开 实现子盒子和父盒子都浮动
延宾的博客
05-05 3453
无标题文档 .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
实现子盒子在父盒子的底部显示
06-27
实现子盒子在父盒子的底部显示的几种方法，分为三种方法来实现。 1、绝对定位 2、flex布局 3、margin布局
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
CSS3盒子模型详解
09-25
CSS3盒子模型是网页设计中一个至关重要的概念，它决定了元素在页面上的布局方式。CSS3引入了新的盒模型机制，使得开发者能更精确地控制元素的尺寸和内容的显示。下面将详细介绍CSS3盒子模型的主要知识点。 1. 盒子...
CSS弹性盒子.docx
02-29
弹性盒子默认情况下会将子元素在一行内按顺序排列。 `flex-direction`属性决定了子元素的排列方向。它可以取`row`、`row-reverse`、`column`和`column-reverse`四个值。例如，`row-reverse`会将子元素从右到左排列...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
CSS学习笔记五---盒子模型 & 溢出属性
Flora_hsx的博客
07-24 430
学习笔记五
子盒子浮动，父盒子清除浮动高度内容撑开
weixin_45397914的博客
07-17 281
     清除浮动的方法本质分为两种，一种为额外标签法，一种父盒子加overflow。 额外标签法又有两种情况。 父级盒子加一个空元素 <div class="father"> <div class="son"></div> <div class="son"></div> <div class="clearfix"></div> </div&
给子盒子设置padding值是不会撑开父盒子的
qq_37621289的博客
09-25 6112
最开始有如下一张图 大标题看起来离下边框太近了，所以想利用h4标签的padding-bottom将它们的距离调得远一些。现在就是有一个疑问，如果将h4的padding-bottom设置成10px,那大盒子会不会被撑大呢。测试结果如下所示： 没有设置padding时，父盒子和子盒子的大小如下： 给h4标签添加padding-bottom:10px;属性之后，显示结果如下： 可以看到父盒子的...
关于 flex 布局时，子元素宽度超出父元素问题及解决方案（问题）
weixin_60547084的博客
03-20 9972
这个是我在项目中遇到的一个bug，使用的 flex 布局，由于我动态的修改绿色盒子的显示与隐藏，导致两边盒子的挤压。先看效果图，大家可以看一下下面的样式，很明显左边和右边的盒子我是给的定宽，但是被挤压了。很明显，红色的盒子没有300px。
CSS 关于子盒子设置margin，溢出父盒子的问题
Tiny2017的博客
11-07 6088
CSS 关于子盒子设置margin，溢出父盒子的问题 问题分析： 通常情况下，一个盒子的width=border+margin+padding+width，然后当我的子盒子width设置100%自父盒子时，再设置margin-left或margin-right，就会发生盒子溢出现象。 解决方法： 方法一：给父盒子设置box-sizing: border-box，设置这个之后，padding mar...
解决将盒子内部图片进行缩放会撑大父盒子的问题
toobad_的博客
10-25 1370
1、此时我们实现当鼠标经过盒子，图片将进行整体放大的功能。 会出现将父盒子也撑大的问题，如图： 2、我们只需要给当前图片的父盒子添加一个“overflow：hidden”代码即可解决问题 // 父盒子 div { overflow:hidden; } div:hover img { transform:scale(1.1); } 效果如图： ...
CSS盒子模型、溢出处理、浮动、高度坍塌问题
czxvzxzczcc的博客
08-17 2109
盒子模型 1.内容区 width 盒子内容区宽度height 盒子内容区高度background-color 背景颜色盒子可见大小由内容区，内边距和边框共同决定为元素设置边框，必须指定3个样式（宽度，颜色，样式）border-width 宽度可以同时指定四个边框大小4个值 上 右 下 左3个值 上 左右 下2个值 上下 左右一个值 4边除了border-width，CSS还提供了border-...
CSS盒子模型详解
qq_46056318的博客
11-01 2186
盒子可见框的大小，由内容区、内边距、边框共同决定，所以在计算盒子大小时，需要将三个区域加到一起计算。CSS将页面中的所有元素都设置为了一个矩形的盒子，对页面的布局就是将不同的盒子摆放到不同的位置。子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度。总结：兄弟元素之间的外边距的重叠，对于开发是有利的，不需要进行处理。内边距，也叫填充，是内容区和边框之间的空间，背景颜色会延申。
css将子盒子放在父盒子的最底部
最新发布
05-25
可以使用`position`和`bottom`属性来实现。首先，将父盒子设置为`position: relative;`，然后将子盒子设置为`position: absolute;...注意，如果父盒子没有设置高度，子盒子可能会超出父盒子的底部。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值