Question

我想在必要时使用flex-grow: 9999“hack”叠加两个弹性项目，我可以通过将“描述”设置为具有最大宽度，遵循正确的设计来实现这一点，但是不要我想这样做，因为我想让它的容器遵循网格流和它的子节点具有全宽（没有最大宽度或固定值限制，即动态流）然后在必要时中断，并避免媒体查询。以下代码段按预期工作，但 .description的{{1}}设置为固定值：

max-width

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
}

section.content-wrapper {
  margin: 0 auto;
  max-width: 975px;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-column-gap: 30px;
  grid-row-gap: 44px;
}

section.content-wrapper .news.with-preview figure {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

section.content-wrapper .news.with-preview figure img {
  width: 100%;
}

section.content-wrapper .news.with-preview {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

section.content-wrapper .news.with-preview .description {
  -webkit-box-flex: 9999;
  -ms-flex-positive: 9999;
  flex-grow: 9999;
  max-width: 228px;
}

section.content-wrapper .news {
  border-top: 3px solid #dbdbdb;
  grid-column: span 5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 19px;
}

也许这是对flex + grid（或flex单独）如何工作的误解。

小提琴：https://jsfiddle.net/rhn8d20b/

如何使用网格正确堆叠弹性项目（flex：9999 hack）

0 个答案: