So legen Sie die Breite einer Unterliste von flex:auto-Elementen fest

Question

Hallo, ich habe eine CSS-Frage. Es gibt zwei Spalten, die rechte Spalte (B) hat eine feste Breite von 100 Pixel und die linke Spalte (A) muss die verbleibende Breite ausfüllen. Darüber hinaus gibt es in Spalte A eine Liste der horizontal hinzugefügten Unterkomponenten.

Das Problem besteht darin, dass beim Hinzufügen von untergeordneten Komponenten die Breite von Spalte A länger und Spalte B niedriger wird.

Wie kann ich der unteren Zeile von Spalte A eine Unterkomponente hinzufügen, wenn diese die Breite von Spalte A überschreitet?

• Wenn die Anzahl der untergeordneten Elemente gering ist
• Wenn die Anzahl der untergeordneten Elemente zunimmt (wie sie ist)
• Wenn die Anzahl der untergeordneten Elemente zunimmt (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>