Question

我已经进行了2列的布局，但是由于item-container元素，右侧的列超出了50％。

如何将色谱柱固定为50％？

列CSS：

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background: red;
}

.column-1 {
  flex: 50%;
  height: 100%;
  background: lightblue;
  border-right: 1px solid black;
}

.column-2 {
  flex: 50%;
  height: 100%;
  background: lightgreen;
}

Answer 1

您使用的flex属性是三个属性的简写：flex-grow，flex-shrink和flex-basis。

您正在使用它将基准设置为50％。为了确保无论内容如何，列之间的分割都保持相等，您需要将flex-shrink设置为0。但是，为了简化操作，您必须传递flex-grow的值也是

示例：

flex: 0 0 50%;

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

如何确保列不增加超过宽度百分比

1 个答案: