Tips for adjusting the width of the child list within a flex:auto element

Question

Tips for adjusting the width of the child list within a flex:auto element

Hello, I need help with a CSS issue. I have a layout with two columns: column A and column B. Column B has a fixed width of 100px, while column A should fill the remaining width. Inside column A, there is a list of child components that are added horizontally.

The problem arises when a new child component is added - it causes column A's width to extend beyond its limits, pushing column B down.

How can I ensure that when a child component exceeds the width of column A, it is automatically moved to the next line within column A?

Scenario with a small number of child elements https://i.sstatic.net/MF5eA.png
Current situation with an increasing number of child elements https://i.sstatic.net/LgmDa.png
Desired outcome with an increasing number of child elements https://i.sstatic.net/kQrBn.png

html css vue.js flexbox

Answer 1

Answer №1

To achieve the desired layout, apply flex-wrap to both the overall container and box A. Additionally, set the width of box A 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>

For a single 'X' div: https://i.sstatic.net/xPQeF.png

For four 'X' divs:https://i.sstatic.net/oHgFl.png

Answer 2

To achieve the desired layout, apply flex-wrap to both the overall container and box A. Additionally, set the width of box A 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>

For a single 'X' div: https://i.sstatic.net/xPQeF.png

For four 'X' divs:https://i.sstatic.net/oHgFl.png

Answer 3

Answer №2

Forget about using flex, switch to display grid instead. The beauty of grid lies in the ability to specify whether an item should behave dynamically or statically.

Take a look at this 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 specified in grid-template-columns signifies one free space, indicating that all available space except for the 100px dedicated to the second element will be occupied by the first item.

Answer 4

Forget about using flex, switch to display grid instead. The beauty of grid lies in the ability to specify whether an item should behave dynamically or statically.

Take a look at this 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 specified in grid-template-columns signifies one free space, indicating that all available space except for the 100px dedicated to the second element will be occupied by the first item.

Tips for adjusting the width of the child list within a flex:auto element

Answer №1

Answer №2

Similar questions

Mastering Bootstrap: Achieving flawless column stacking in succession

Set default values for input fields based on selected options in php and mysql

I am looking to add values to this HTML request

Centered Menu with Left Alignment

Unlocking the secrets of text parsing

Copy and paste the code from your clipboard into various input fields

After clicking, the radio button in Bootstrap 4 shifts to the left

Creating an image button within a form using Twitter Bootstrap

"Struggling to transform HTML form data into JSON format, only to end up with

What could be the issue preventing .find from functioning correctly with this other css selector in JQuery?

Designing a webpage feature that enables users to choose an image from the selection

Unable to extract text from a div using web scraping

What are the steps to adjust the width of a website from the standard size to a widescreen

Monitor and refresh the Vue Nuxt api directory

What is the method for calculating the total price based on three distinct data attributes?

Incorporate Bootstrap styling into a layout featuring a row containing numerous input fields

Transforming a few pages to be generated server-side using Vue3

I encountered an issue during test payment where the error message "The class 'Stripe' was not found" appeared

How to select the final td element in every row using JQuery or JavaScript, excluding those with a specific class

Ways to obtain an attribute through random selection