使父容器采用弹性项目宽度

Question

我有一个高度有限的列表容器。 它有一些子项的列表。 这些项目应从上到下、从左到右放置。 如果元素越来越多，它们将被放置在右侧的新列中。

如何让父容器从内容中获取宽度？ 这样父容器就不会扩展到 window 的整个宽度并隐藏下一列？

我尝试了什么：我试图设置不同的父母显示，但第二列的孩子被隐藏，并且.parent_item的整个宽度 = 只有第一列的宽度。

例子：

 .parent { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-sizing: border-box; margin: auto; padding: 2px; height: 100%; max-height: 150px; max-width: 80vw; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }.parent_item { display: flex; flex-flow: column wrap; gap: 2px; max-width: max-content; overflow: auto; }.parent_item div { background-color: #f2f2f2; height: 30px; min-width: 30px; }

 <div class="parent"> <div class="parent_item"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> </div> <div class="parent_item"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </div>

Answer 1

通过使用显示内容，您可以使 display flex 忽略其子项并使其显示孙子项，检查代码段以获取结果。

 .parent { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-sizing: border-box; margin: auto; padding: 2px; height: 100%; max-height: 150px; max-width: 80vw; gap: 3px; display: flex; flex-flow: column wrap; overflow: auto; }.grand-child { background-color: #f2f2f2; height: 30px; min-width: 30px; }.child { display: contents; }

 <div class="parent"> <div class="child"> <div class="grand-child">1</div> <div class="grand-child">2</div> <div class="grand-child">3</div> <div class="grand-child">4</div> <div class="grand-child">5</div> <div class="grand-child">6</div> <div class="grand-child">7</div> <div class="grand-child">8</div> <div class="grand-child">9</div> <div class="grand-child">10</div> <div class="grand-child">11</div> </div> <div class="child"> <div class="grand-child">1</div> <div class="grand-child">2</div> <div class="grand-child">3</div> <div class="grand-child">4</div> <div class="grand-child">5</div> <div class="grand-child">6</div> </div> </div>

要使行单元格在另一个孩子的新行中开始，请使用以下 CSS 样式；

 .parent { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-sizing: border-box; margin: auto; height: 100%; max-height: 150px; max-width: 80vw; display: flex; }.child { margin: 2px; flex: 1; gap: 3px; display: flex; flex-flow: column wrap; overflow: auto; }.grand-child { background-color: #f2f2f2; height: 30px; min-width: 30px; }

 <div class="parent"> <div class="child"> <div class="grand-child">1</div> <div class="grand-child">2</div> <div class="grand-child">3</div> <div class="grand-child">4</div> <div class="grand-child">5</div> <div class="grand-child">6</div> <div class="grand-child">7</div> <div class="grand-child">8</div> <div class="grand-child">9</div> <div class="grand-child">10</div> <div class="grand-child">11</div> </div> <div class="child"> <div class="grand-child">1</div> <div class="grand-child">2</div> <div class="grand-child">3</div> <div class="grand-child">4</div> <div class="grand-child">5</div> <div class="grand-child">6</div> </div> </div>

我希望这能解决您的问题，如果它没有让我知道，我会再调查一下。