Css Flexbox：如何让 div 在不换行的情况下填充 100% 的容器宽度

发布于06月06日

我正在将一个旧的基于inline-block的网格模型更新为一个新的Flexbox模型.除了一个小问题外，一切都进行得很顺利，这个问题有点 destruct 交易:

我有一堆CSS控制的滑块；所以有一个宽度为white-space%的包含包装器，里面是另一个div:它的宽度也是white-space%，但它的white-space%设置为nowrap.使用inline-block，这意味着内部div(被设置为white-space%宽度的also)不会受到父级约束的约束，而会换行到下一行-它们只会继续流出盒子.这正是我想要的.然而，使用Flexbox我根本不能让它工作.作为参考，这里有一张图片:

Flexbox问题

作为参考，这里有一个使用内联挡路的jsFdle:

...使用Flexbox时的not分:http://jsfiddle.net/5zzvqx4b/1/分

我try 过flex、flex-basis、flex-wrap、flex-grow等各种变体，但就我的一生而言，我无法实现这一点.

请注意，我can通过将.boxcontainer的宽度设置为200%，以一种粗糙、僵硬的方式强制它执行我想要的操作.这适用于这个示例，但在某些情况下，我不会事先知道会有多少个子框，如果可能的话，我宁愿不对每个元素使用内联样式.

* { box-sizing: border-box; } .wrapper { width: 200px; background-color: #EEEEEE; border: 2px solid #DDDDDD; padding: 1rem; } .boxcontainer { position: relative; left: 0; border: 2px solid #BDC3C7; transition: all 0.4s ease; display: flex; } .boxcontainer .box { width: 100%; padding: 1rem; flex-shrink: 0; } .boxcontainer .box:first-child { background-color: #F47983; } .boxcontainer .box:nth-child(2) { background-color: #FABCC1; } #slidetrigger:checked ~ .wrapper .boxcontainer { left: -100%; } #overflowtrigger:checked ~ .wrapper { overflow: hidden; }

<input type="checkbox" id="overflowtrigger" /> <label for="overflowtrigger">Hide overflow</label><br /> <input type="checkbox" id="slidetrigger" /> <label for="slidetrigger">Slide!</label> <div class="wrapper"> <div class="boxcontainer"> <div class="box"> First bunch of content. </div> <div class="box"> Second load of content. </div> </div> </div>

Css Flexbox：如何让 div 在不换行的情况下填充 100% 的容器宽度

推荐答案

Css相关问答推荐

收听类人猿上的输入验证事件

在React中使用Tailwind自定义组件着色

Tailwind仅在启用时才在按钮上设置group-hover

如何使用CSS滚动驱动动画重复时间轴范围

两列网格中左列第一个文本正下方的按钮

如何使用来自单独模块的代码将自定义标头插入到使用 DT Shiny 呈现的表中？

从 React MUI 自定义不同组件的正确方法？

如何使用props 为 Vue 中的组件创建动态背景图像？

不能在带有 SCSS 的过滤器灰度内使用 CSS 变量

老虎机插槽上的 CSS 对齐问题

CSS动画恢复默认

基于内容显示(show)/隐藏(hide)同级div

纯 CSS 滚动动画

thead 和 tbody 之间的间距

让 div 占据 100% 身体高度，减go 固定高度的页眉和页脚

单选按钮和标签显示在同一行

我应该使用最大设备宽度还是最大宽度？

bootstrap.css 和 bootstrap-theme.css 有什么区别？

将样式应用于第一行的单元格

仅当将 Div 悬停在上方时才显示滚动条？