flex-grow不会在容器中以全宽

Question

我有一个ul容器和li菜单项。容器是100％宽度，li项是父元素的50％宽度。父设置为显示flex，flex方向为列。现在这些项目是flex父项的宽度的一半，但是当我将子项目设置为flex-grow: 1时，似乎根本没有发生任何事情。

menu-secondary-container ul {
  display: flex;
  flex-direction: column;
}

#menu-secondary li {
  box-sizing: border-box;
  font-size: 13px;
  border: 1px solid white;
  line-height: 2.3;
  width: 50% !important;
  padding: 0;
  flex-grow: 1;
}

我希望两个项目在一行中，总共两行。

Answer 1

正如我在上面评论的那样，你需要像这样修复你的代码，以便每行有2个项目：

apt-get -f install

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  box-sizing: border-box;
  font-size: 13px;
  border: 1px solid #000;
  line-height: 2.3; 
  flex: 0 1 50%; /* Or flex-basis:50% Or width:50% */
  padding: 0;
}