如何設定 flex:auto 元素的子清單的寬度

Question

您好，我有一個 CSS 問題。 有兩列，右 (B) 列的固定寬度為 100px，左 (A) 列必須填入剩餘寬度。另外，在 A 列內，有一個水平新增的子元件清單。

問題是，當新增子元件時，A列的寬度變長，B列變低。

如何讓新增子元件時，如果超過A列寬度，則新增到A列內的底線？

• 當子元素數量較少時
• 當子元素數量增加時（原樣）
• 當子元素數量增加時（TO-BE）

Answer 1

您可以使用顯示網格來取代 Flex。使用網格，您可以定義項目是動態的還是靜態的。

範例：

.main {
  display: grid;
  grid-template-columns: 1fr 100px;
}

<div class="main">
  <div class="dynamic-size">
    I am dynamic in size
  </div>
  <div class="static-size">
    I'll always be 100px
  </div>
</div>

grid-template-columns 中的 1fr 代表一個可用空間，這意味著除了第二個元素的 100px 之外的所有空間都將被第一個元素填滿。

Answer 2

在整個容器和 A 上都使用 flex-wrap，並將 A 框的寬度設為 calc(100% - 100px)。

body {
  width: 100vw;
  padding: 0;
  margin: 0;
  color: white;
}

#flex {
  display: flex;
  background-color: grey;
  width: 100vw;
  height: fit-content;
  flex-wrap: wrap;
}

#a {
  width: calc(100% - 100px);
  height: fit-content;
  background-color: red;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

#a .x {
  width: 100px;
  margin: 10px;
  background-color: green;
  height: 200px;
}

#b {
  width: 100px;
  height: 500px;
  background-color: blue;
}

<div id="flex">
  <div id="a"> A
    <div class="x">X</div>
    <div class="x">X</div>
    <div class="x">X</div>

  </div>
  <div id="b">
    B
  </div>
</div>