How to set the width of a sublist of flex:auto elements

Question

Hello, I have a CSS problem. There are two columns, the right (B) column has a fixed width of 100px and the left (A) column must fill the remaining width. Additionally, within column A, there is a list of subcomponents added horizontally. The problem is that when adding child components, the width of column A becomes longer and column B becomes lower. How can I make it possible to add a subcomponent to the bottom line of column A if it exceeds the width of column A? When the number of child elements is less When the number of child elements increases (as is) When the number of child elements increases (TO-BE)

P粉146080556 · Answer

You can use display grid instead of Flex. Using the grid, you can define whether an item is dynamic or static.

Example:

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


  
    I am dynamic in size
  
  
    I'll always be 100px

The 1fr in

grid-template-columns represents a free space, which means that all space except 100px of the second element will be filled by the first element.

P粉419164700 · Answer

Use flex-wrap on both the entire container and A, and set the width of the A box to 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;
}