使父容器采用彈性項目寬度

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>

我希望這能解決您的問題，如果它沒有讓我知道，我會再調查一下。