Flexbox不是全宽

为什么不延伸到全宽？

我知道这可能很简单,但我无法解决,我哪里出错了？

容器实际上是 100%宽,即跨越窗口的整个宽度.但是使用默认的弹性设置,其子级将简单地左对齐,并且仅与其内容一样宽.

但是,如果您应用flex-grow: 1;子元素以允许它们变宽,它们将拉伸并填充容器的整个宽度.

.masonry_container {
  display: flex;
}

.masonry_left_col {
  border: 1px solid grey;
  flex-grow: 1;
}

.masonry_right_col {
  border: 1px solid grey;
  flex-grow: 1;
}

  

    Content
  

  

    Content