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

Question

Hi, I have a CSS question. 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 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 small
• When the number of child elements increases (as is)
• When the number of child elements increases (TO-BE)

Answer 1

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;
}

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

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.

Answer 2

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;
}

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