防止flex项溢出flex容器

文章/答案/技术大牛

发布

3回答

html、css、flexbox

在下面的代码中，有没有办法让.inner不溢出.outer我想摆脱身体滚动条。 height: 100vh; margin: 0;} height: 100%; flex-flow: column;} display: flex; flex:

浏览 16提问于2018-01-12得票数 3

回答已采纳

1回答

全宽度挠曲项目

html、css、flexbox、bootstrap-4

我正在尝试构建一个带有水平滚动的div，其中每个项的宽度取决于其内容。下面是我的问题的演示：在这里，我想要的flex项目应该采取完全的宽度，取决于它的内容，它不应该包装。flex-nowrap workflow_container"> <div class"p-2 bd-highlight">Fl

浏览 0提问于2018-05-22得票数 1

回答已采纳

1回答

如何在CSS中制作一个全尺寸的div？

html、css、margin

weather-form-div{ width: 372px;} display: flex;}

浏览 1提问于2021-12-30得票数 1

1回答

忽略宽度的flex项目

html、css、flexbox

在断点，我对home-promos分区应用了一个flex类，并对元素进行了重新排序。这可以正常工作。 display: flex;.home-promo-center {} order: 2; }

浏览 0提问于2016-06-14得票数 23

回答已采纳

1回答

弯曲项的宽度正在减少。

html、css、flexbox

要做到这一点，我想使用flexbox来完成，但是当我设置移动视图时，导航项的宽度就会减小。 display: flex; padding: 0; background-color: #f2f2f2; overflow-x: auto; flex-grow: 1;

浏览 1提问于2016-11-15得票数 11

回答已采纳

1回答

更改父容器的伸缩方向会导致子元素的伸缩增长停止工作吗？

css、flexbox

当我在代码中改变父容器的伸缩方向时，为什么flex-grow停止工作？在下面的示例中，我有两个div，一个是父flex-container div，另一个是具有绿色背景的单个flex项的子项，正如您所看到的，flex-grow工作得很好。 Lorem ipsum dolor sit amet, consectetur adipiscing elit</

浏览 0提问于2020-09-24得票数 0

2回答

flex项不溢出

html、css、flexbox

</html>.box { height: 300px; display: flex; width: 200px; border: 1px solid red;在这里，flex项的宽度大于flex容器的大小，但仍然不会在主轴上溢出当我检查元素时，我注意到flex<

浏览 0提问于2020-01-01得票数 0

1回答

使用柔性箱获得等高行，而不是列

html、css、flexbox

我是在样式表中使用flex的新手。.flex { flex-direction: column;.first { background:blue;} padding: 1em; flex: 1; <div class="flex</e

浏览 1提问于2016-04-12得票数 2

回答已采纳

5回答

如何将flex容器设置为flex项的宽度？

css、flexbox

我有一个带有justify-content: flex-start的flex容器。由于flex项占用的空间小于容器的大小，最终导致右侧溢出。除了在flex-container上设置显式宽度之外，有没有一种方法可以只使用width: auto的等价物来消除溢出？

浏览 3提问于2014-01-08得票数 91

2回答

将柔性盒项目垂直对齐，保持相同宽度。

html、css、flexbox

假设我一行有10个条目，但是容器内部应该是可见的，只有4个条目，其余的都被溢出所隐藏。在父容器的宽度函数中，所有这些项都被分割到相同的宽度。data-columns="10"] ul li {} margin: 0; display: flex; flex-wrap: nowrap;

浏览 1提问于2016-07-07得票数 1

回答已采纳

1回答

对齐显示的flex父菜单的子菜单。

html、css、flexbox

在具有属性display: flex的菜单下面有一个子菜单，列表项具有属性flex-grow: 1。这是可行的，但问题是，由于菜单及其项显示为flex，所以当浏览器缩小列表项的宽度时，列表项的宽度会随之缩小，因此子菜单不会对齐。#menu-main-menu {} float: left; text-align

浏览 2提问于2016-11-14得票数 1

回答已采纳

2回答

如何在没有固定高度的情况下实现动态div溢出

html、css、flexbox、overflow

/*----------SECTION 1----------*/ height: 80px; display: flex; align-items: center;} display: flexheight: 100%; width: 300px; backgro

浏览 1提问于2018-11-25得票数 4

回答已采纳

2回答

如果前一个同级是浮动的，Flex容器溢出

html、css、flexbox、css-float

如果前一个同级项设置为宽度为100%的float，而后面的同级项设置为display: flex，则后者会溢出父容器，而不是换行到新行。对于除flex (或grid)以外的任何其他display值，它都应该进行包装，所以当设置为flex时，它为什么不会进行包装.float-left { width: 100%; display: flex; back

浏览 0提问于2017-08-29得票数 6

1回答

文本溢出:省略导致flex项溢出flex容器

html、css、flexbox、ellipsis

我在一个弹性容器里有两列。其中一个列(橙色的)包含一个化身，它的宽度应该正好是容器的10%。我所期望的：但是，当我尝试执行text-overflow: ellipsis时，我的第二行比flex容器更宽。; background: red; flex-shrink: 0; backg

浏览 4提问于2016-12-22得票数 6

回答已采纳

1回答

第一级flex项是display:flex本身的div，根据类的不同，它们可以具有行或列的flex-directon：。这些嵌套的flex项的第一级和第二级都应该增长到填充剩余的父大小，如果添加了新元素，则会缩小，永远不会溢出。我的问题:当将新的flex项目添加到“第一级”时，这似乎工作得很好。然而，将新的flex项添加到第二层似乎总是溢出父容器高度。因为我不太擅长描述这样的东西

浏览 0提问于2020-11-12得票数 1

1回答

为什么这个挠曲盒不能滚动？

css、flexbox

.append('<div>Test</div>');} return firstData;.wrapper {<div class="wrapper">NEXT display: flex

浏览 2提问于2020-01-17得票数 2

回答已采纳

2回答

如何使flex-box与需要截断文本的嵌套子程序一起工作？

html、css、flexbox

若要让一个flex-子带省略号的文本被截断，可以给父程序一分钟，即:0。在我的项目中，子组件嵌套在几乎10个不同的flex容器中。我需要给所有的父母一个最小的宽度:0还是有一个更好的工作在附近？HTML <div class="flex-parent-parent"> <div class="flex-pa

浏览 5提问于2022-04-06得票数 0

回答已采纳

2回答

为什么弹性物品包装而不是收缩？

html、css、flexbox

我想知道是否有人能给我一个简单的介绍，说明如何计算柔性盒布局，特别是按哪个优先级排列，例如： <div id="container" style="display: flex; flex-direction: row; flex-wrap:wrap;"> <div style="flex: 1 0 200px; height:200px; background-color: lightgreen;style="flex

浏览 0提问于2016-09-12得票数 7

回答已采纳

2回答

如何使网格项在具有指定高度的网格中适合/自动调整大小？

javascript、html、css

嗨，我有一个网格容器，并希望网格容器只是这么高，所有的网格项目适合并相应地调整到网格高度(500 so )。type="text"> <img id="1" src="url"></div>我让用户选择并添加多个网格项。但是，我无法获得整个网格项(输入、文本和图像)以适

浏览 4提问于2020-06-06得票数 0

回答已采纳

4回答

Flexboxs儿童的父母过多

html、css、flexbox

; justify-content: space-between;} display: flex; justify-content: center;header{ z-index: 10;}.gamebox

浏览 1提问于2016-05-17得票数 3

回答已采纳

点击加载更多