我使用FlexBox来布局页面,因为growing行为很有用.但我想完全阻止shrinking的行为.

不管怎么说,要管理这件事吗?

示例代码:

<div class="flex-vertical-container">
    <div class="flex-box">
         This one should grow but not shrink
    </div>
    <div></div>
    <div></div>
</div>

CSS

.flex-vertical-container {
    display: flex;
    flex-direction: column;
}

.flex-box {
    flex: 1;
}

推荐答案

try 将.flex-box上的flex-shrink属性设置为0.

Css相关问答推荐

我控制的自定义单选按钮无法重新 Select

如何将bslib::card()中的扩展按钮移到右上方,其中full_screen = TRUE?

如何在CSS中使用nextJs来指定基色?

当具有外部高度的网格项溢出时,为什么溢出滚动端口填充不应用于网格容器?

靴子,为什么我不能让任何东西正确地排好队?

当滚动量较小时,在滚动问题上动画粘性导航

如何使按钮:之后像按钮:之前一样可见

弹性布局溢出时的换行符

在 Tailwind css 中,间距对我不起作用

如何在 TypeScript 文件中导入 CSS 模块?

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

React Typescript 中的自动 typewriter 效果

Flexbox 子高度它的内容

如何制作一个居中的标题样式,其中换行符将最长的行排列在底部

调整屏幕大小时无法让我的视频背景保持不变

CSS3 的 :root 伪类和 html 有什么区别?

flexbox 布局中的 Padding-bottom/top

Chrome 呈现 colored颜色 的方式与 Safari 和 Firefox 不同

css 中的 clearfix 类有什么作用?

为什么 CSS 中的光标:指针效果不起作用