css - 没有为 flexbox 显示的元素

标签 css flexbox

<分区>

我正在尝试创建一个 2 列布局,左侧宽度固定,右侧灵活列填充屏幕的其余部分。列未显示。

.container {
  display: flex;
  width: 100%;
  height: 100%;
}

.left-column {
  flex: 0 0 200px;
  height: 100%;
  background: lightcoral;
}

.right-column {
  flex-grow: 1;
  background: lightgreen;
}

https://stackblitz.com/edit/2-column-fixed-flex

最佳答案

您需要分配高度和 flex-direction:row;,对于固定宽度,left-column 也应该有宽度。

.container {
  display: flex;
  width: 100%;
  height: 100vh;
}

关于css - 没有为 flexbox 显示的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57702259/

上一篇:css - BEM CSS block 或修饰符

下一篇:css - 背景 CSS 中的中心图标

相关文章:

html - 如何使用 flex grow with overflow :scroll; item?

css - 当左侧有很多内容时,防止 CSS 将节点包裹在其最大宽度以下的树中,例如思维导图

html - 容器内的 Div 似乎不在页面中心

html - 仅使用 CSS 创建下拉列表项菜单

html - flexbox 中的 align-self 属性不起作用?

css - IE10 有 flex-grow 吗?

javascript - CSS - 固定菜单按钮在滚动时显示

css - WordPress 导航栏中一个链接周围的边框

html - 你如何重新排列 flex 元素?

html - 为什么 align-self 不左右对齐元素?