Bagaimana untuk menetapkan lebar subsenarai elemen flex:auto

Question

Hai, saya ada soalan CSS. Terdapat dua lajur, lajur kanan (B) mempunyai lebar tetap 100px dan lajur kiri (A) mesti mengisi lebar yang tinggal. Selain itu, dalam lajur A, terdapat senarai subkomponen yang ditambah secara mendatar.

Masalahnya ialah apabila menambah komponen anak, lebar lajur A menjadi lebih panjang dan lajur B menjadi lebih rendah.

Bagaimanakah saya boleh menambah subkomponen pada baris bawah lajur A jika ia melebihi lebar lajur A?

• Apabila bilangan elemen kanak-kanak kecil
• Apabila bilangan elemen kanak-kanak meningkat (seperti sedia ada)
• Apabila bilangan elemen kanak-kanak meningkat (TO-BE)

Answer 1

Anda boleh menggunakan grid paparan dan bukannya Flex. Menggunakan grid, anda boleh menentukan sama ada item itu dinamik atau statik.

Contoh:

.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>

1fr dalam grid-template-columns mewakili ruang kosong, yang bermaksud bahawa semua ruang kecuali 100px elemen kedua akan diisi oleh elemen pertama.

Answer 2

Gunakan flex-wrap pada keseluruhan bekas dan A, dan tetapkan lebar kotak A kepada 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>