flex:1,min-width: 0 保证内容不超出父盒子

最新推荐文章于 2025-06-30 17:47:07 发布
原创 最新推荐文章于 2025-06-30 17:47:07 发布 · 4.9k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#富勒烯：1，min-width：0

本文介绍了一个在Flex布局中防止内容溢出的技巧，通过设置flex:1和min-width:0，可以确保子元素的内容不会超出其父容器的边界。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在一个flex布局中，设置flex:1,min-width: 0 ，保证内容不超出外层容器

##如果没有设置min-width，当内容大于剩余盒子宽度时会超出父盒子，设置min-width保证内容局限在父盒子内。

hight level
关注
深入理解 flex-grow、flex-shrink、flex-basis
每天都要努力学习哦~~
09-22 3339
flex items 总和超出 flex 容器，会根据 flex-shrink 的设置进行压缩如果有剩余空间，如果设置 flex-grow，子容器的实际宽度跟 flex-grow 的设置相关。如果没有设置flex-grow，则按照 flex-basis 展示实际宽度flex 1在CSS中，flex是flex-grow, 和flex-basis这三个属性的简写形式。当你看到flex: 1;- 表示如果容器内有多余的空间，这个元素会按照比例增长来占据这些空间。
记录问题：flex:1 和min-width:0 一起用，解决子元素超出父元素
weixin_42120767的博客
11-01 1655
一直用flex开发，没遇到啥问题，知道有一天设置一个div的flex:1,然后子元素width:100%,子元素里面又有内容，后面发现内容超出了父元素div的宽度，这时候死活都找不到问题在哪。后面在父元素继续添加min-width:0即可 结果：flex:1 和min-width:0 一起用，能避免子元素超出父元素 ...
css布局中使用min-width: 0的作用
weixin_42771853的博客
04-14 1100
min-width是最小宽度的意思，在存在flex布局的父元素中使用min-width: 0，可以使父元素中的子元素内容不超出父元素容器。作用：让包裹的盒子宽度不会因为内容的新增而增加，与使用`overflow hidden`的效果一样。父元素存在flex布局，由于flex布局的特性，如果不设置宽度，父元素可以被子节点无限撑开。
CSS的flex布局的flex: 1；不生效
XD1060198931的博客
06-30 889
解决：给其再设置min-height:0;（垂直方向）或 min-width: 0。设置 min-height: 0。是 flex-grow: 1。当 Flex 子元素设置。
当flex布局遇上min-width
Mirror_r的博客
11-16 2478
这几天遇到一个及其神奇的事情：flex布局遇上white-space:nowrap，这个布局就崩了！！！ 在项目的某个页面中要做一个Menu（这个Menu不是项目的主Menu，而是某个页面中的内容），预想是做成这个样子的： 因为Menu必须要和旁边一样高，而rightContent的内容是动态的，不确定究竟有多高，想到用绝对布局，但这种绝对布局，还是能不用就不用吧。然后我就用flex布局了，写了...
Flex布局使用Flex:1时候，设置 width: 0；效果
m0_53164768的博客
04-08 258
在使用flex:1时候 让他自动占空间，但是如果比如后面的内容过多的时候。，导致前面内容直接被挤压掉。如果给后面flex：1设置width: 0 效果。导致前面内容即使设置宽度，也会是被挤压。后面的内容则不会被挤压。
设置flex:1元素的子元素无法设置超出隐藏，flex: 1；width: 0；的原理
qq_31150171的博客
01-12 3628
解决：设置flex:1元素的子元素无法设置超出隐藏 假设：设置flex：1的项为A 所以，当A项的width为0时，剩余空间等于容器的宽度减去除A项以外（因为此时它的width为0），其他flex项的大小，然后把剩余空间给A项 补充：width也可以不设为0，只要设置的宽度不大于剩余空间就可以，因为此时的剩余空间为 flex 容器的宽度.
".dashboard-col-pie { flex: 1.1; min-width: 360px; padding-bottom: 8px; } .dashboard-col-table { flex: 2; min-width: 480px; padding-bottom: 8px;"解释代码
07-29
但是，请注意，如果容器的宽度小于两个元素的最小宽度之和（360px+480px=840px），那么由于min-width的限制，这两个元素可能会超出容器，导致出现横向滚动条。或者，如果容器设置了flex-wrap: wrap，那么它们可能会...
<template> <view class="container"> <view class="banner-section"> <image class="banner-image" src="/static/IntegrityCulture.png" /> </view> <view class="title">廉洁文化资讯</view> <view class="news-list"> <scroll-view scroll-y="true" :enhanced="true" :show-scrollbar="false" > <view v-for="item in newsList" :key="item.id" class="news-item" @click="navigateToDetail(item)" > <view class="news-content"> <text class="news-title">{{ item.title }}</text> <text class="news-summary">{{ item.summary }}</text> <text class="news-date">{{ item.publishDate }}</text> </view> <view class="status-box" :class="item.read ? 'read' : 'unread'" > {{ item.read ? '已阅' : '未阅' }} </view> </view> </scroll-view> </view> </view> </template> <script setup> import { ref, onMounted } from 'vue'; const newsList = ref([]); const fetchData = () => { setTimeout(() => { newsList.value = [ { id: 1, title: '廉洁从业，从我做起', summary: '廉洁从业是每一位员工应尽的责任和义务，本文介绍了公司廉洁文化建设的相关要求和实践。', publishDate: '2024-09-10', read: true }, { id: 2, title: '加强反腐倡廉，构建阳光企业', summary: '公司持续加强反腐倡廉工作，推动形成风清气正的企业文化氛围。', publishDate: '2024-09-08', read: false }, { id: 3, title: '廉洁文化进班组，清风正气润人心', summary: '公司组织廉洁文化进班组活动，通过宣传、培训等方式提升员工廉洁意识。', publishDate: '2024-09-05', read: false }, ]; }, 500); }; onMounted(fetchData); const navigateToDetail = (item) => { uni.navigateTo({ url: `/pages/IntegrityCulture/IntegrityCultureDetail/IntegrityCultureDetail?id=${item.id}` }); }; </script> <style scoped> /* 整体容器 */ .container { padding: 30rpx; background-color: #f9f9f9; height: 100%; overflow: hidden; box-sizing: border-box; /* display: flex; */ flex-direction: column; } /* 顶部区域 */ .banner-section { margin-bottom: 40rpx; border-radius: 16rpx; overflow: hidden; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); flex-shrink: 0; } .banner-image { width: 100%; height: 320rpx; display: block; } .title { font-size: 36rpx; font-weight: bold; text-align: center; display: block; margin-bottom: 40rpx; flex-shrink: 0; } /* 滚动区域 */ .news-list { background-color: #fff; border-radius: 16rpx; overflow: hidden; flex: 1; min-height: 0; display: flex; flex-direction: column; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } /* 滚动容器 */ .scroll-container { flex: 1; min-height: 0; overflow: hidden; /* box-sizing: border-box; */ } /* 隐藏滚动条 */ .scroll-view ::-webkit-scrollbar { display: none; width: 0; height: 0; color: transparent; } /* 新闻项样式 */ .news-item { padding: 30rpx; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1rpx solid #eee; transition: background-color 0.2s; } .news-item:active { background-color: #f5f7fa; } .news-content { flex: 1; padding-right: 20rpx; } .news-title { font-size: 32rpx; font-weight: bold; color: #333; display: block; margin-bottom: 10rpx; } .news-summary { font-size: 28rpx; color: #666; display: block; margin-bottom: 10rpx; line-height: 1.5; } .news-date { font-size: 24rpx; color: #999; display: block; } .status-box { padding: 8rpx 16rpx; font-size: 24rpx; border-radius: 8rpx; min-width: 80rpx; text-align: center; flex-shrink: 0; } .status-box.read { background-color: rgba(76, 175, 80, 0.1); color: #4caf50; } .status-box.unread { background-color: rgba(244, 67, 54, 0.1); color: #f44336; } /* 响应式调整 */ @media (max-height: 600px) { .banner-image { height: 280rpx; } .news-list { border-radius: 12rpx; } } </style> 帮我修改这段代码，我想要限定列表板块的高度超出部分隐藏，然后该板块滚动不影响其他板块
最新发布
08-15
我们有两个需求：限制新闻列表板块的高度，以及在内容超出时启用独立滚动。 解决方案： 1. 设置固定高度：通过CSS的height或max-height属性来限制新闻列表板块的高度。 2. 启用滚动：当内容超出设置的高度时，...
一个盒子设置了flex布局，上下排列时，如果上面盒子宽度不确定，下面盒子flex:1，下面这个盒子可能会超出父盒子的大小，这是为什么，应该如何解决
07-14
3. 使用flex-wrap属性：可以给父盒子设置flex-wrap: wrap属性，这样当上面的盒子宽度超过父盒子时，会自动换行显示，避免下面的盒子超出父盒子的大小。 需要根据具体情况选择适合的解决方法，以确保布局的正确性和...
使用flex布局 ,子盒子超出父盒子
05-24
当子元素的内容超出父元素时，可以考虑使用以下方法： 1. 使用 `overflow` 属性 可以将父元素的 `overflow` 属性设置为 `auto` 或 `scroll`，这样当子元素的内容超出父元素时，就会产生滚动条，可以通过滚动条来...
【CSS】当有flex:1时定义width:0的作用是什么？
a1071626267的博客
06-08 2082
【CSS】当有flex:1时定义width:0的作用是什么？
‘flex设置为1后为什么要设置width为0,和布局超出省略号为什么会超出容器,为什么会没有用和在苹果环境下获取屏幕高度需要注意的点
动感超人的博客
11-17 3362
最近在做手机端的页面,制作过程出现了flex布局的一些问题,再次记录在解决办法关于在flex:1的情况下设置为width的效果如果没有设置width,当内部元素的内容大小超过平均分配的剩余空间时,元素的宽度等于内容大小,如果设置了width并且这个width的大小小于平均分配的剩余空间大小时,取平均分配的剩余空间;当flex设置为 1 时 相当于 剩余空间大小 = 父元素的宽度 因此平均的剩余空间大小等于 = 父元素的宽度 / 元素的个数,直接设置width为0可以保证元素宽度平分父元素宽度。
WHAT - CSS 中的 min-width
weixin_58540586的博客
05-20 773
在中我们已经详细介绍过width。那为什么 CSS 还要提供一个min-width？阅读本文前可先阅读。min-width是 CSS 中的一个属性，用于设置元素的。它的作用是：即使内容或父容器试图将该元素压缩得更小，也不会让元素宽度小于min-width指定的值。
关于 flex 布局时，子元素宽度超出父元素问题及解决方案（问题）
热门推荐
weixin_60547084的博客
03-20 1万+
这个是我在项目中遇到的一个bug，使用的 flex 布局，由于我动态的修改绿色盒子的显示与隐藏，导致两边盒子的挤压。先看效果图，大家可以看一下下面的样式，很明显左边和右边的盒子我是给的定宽，但是被挤压了。很明显，红色的盒子没有300px。
使用 width: 0 避免 flex: 1 元素宽度溢出
汤一飞
10-12 1340
参考 解决用flex布局时内容可能溢出的问题 背景 使用 flex 布局, 左右两边各一个元素, 中间 flex: 1, 中间结构为: 二行文字, 第一行不换行超长隐藏, 第二个最多支持换两行超长隐藏; 结果设置文字不换行后, 中间元素溢出 flex: 1 范围 解决 上述参考文章, 有两种方案: 中间元素 overflow: hidden 但是这样会导致第二行文字不能"最多支持换两行"; 中间元素 width: 0 成功解决 ...
解决flex布局内容超出盒子宽度问题
小漠007的专栏
12-08 7794
方案1： 子项目设置flex:1;overflow:hidden; 子项目内容 设置超出省略号，可以完整显示三个省略号 子项目内容宽度等于子项目 在线预览 #main { width: 350px; height: 100px; border: 1px solid #c3c3c3; display: flex; } #main div:nth-of-type(1) {flex:1;overflow:hidden;} #main div:nth-of-type(2) {flex-g
chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素
aoyao9093的博客
09-30 1574
1 <div class="container"> 2 <div class="item"> 3 <div class="item-inner"> 4 <a> 5 Botón 6 </a> 7 ...
flex: 1导致子元素超出父元素
qq_31247149的博客
08-02 1174
overflow: hidden 属性则告诉浏览器，如果一个元素的内容超出了该元素的边界，浏览器应该裁剪掉超出部分的内容，而不是让内容溢出到父元素之外。这意味着任何超出元素边框的内容都将不可见。因此，即使 flex: 1 的子元素内部的内容比预期的要多，overflow: hidden 也会确保这些额外的内容不会导致视觉上的混乱或破坏布局结构。即使子元素的内容试图超出其定义的边界，overflow: hidden 也会阻止这部分内容显示出来，从而确保整个容器的外观整洁，没有溢出的内容。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值