If one sibling requires flexing, apply flex to all siblings

Illustrative Issue:

When space is limited, one row will start to flex while others remain static if they have enough space. Is there a way to make all rows flex when at least one needs to?

Instead of viewing it like this, I aim for it to be seen as this.

Additional Elements:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510 510"><title>x</title><line x1="5" y1="5" x2="505" y2="505" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:10px"/><line x1="5" y1="505" x2="505" y2="5" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:10px"/><rect x="5" y="5" width="500" height="500" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:10px"/></svg>

HTML structure:

<div className='container'>
  <div className='container__side top'>
    <div className='container__row nameone'>
      <img className='container__type' src='...'/>
      <svg className='container__item' ... />
      // Each row has a varying number of svg items from an API fetch loop
    </div>
    <div className='container__row nametow'>
    </div>
    // etc
  </div>
  <div className='container__side bottom'>
  </div>
</div>

SCSS styling:

.container {
   background: white;
   display: flex;
   flex-direction: column;
   padding: 1rem;

   &__row {
     display: flex;
   }

   &__type {
      margin-right: 2rem;
      width: 5rem;
      height: 5rem;
      object-fit: contain;
   }
   &__item {
      padding: .5rem;
      width: 7rem;
      height: 7rem;
   }
}

Answer №1

If you want to prevent an item from shrinking in a flex container, simply include the line flex-shrink: 0; within the &__item selector.

After adding this CSS rule, your final styling for the item should resemble the following:

&__item {
    padding: .5rem;
    width: 7rem;
    height: 7rem;
    flex-shrink: 0;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring GLTF models with Threejs - just a click away!

I am currently developing a project in three.js where I aim to load a GLTF file consisting of geometric shapes. My goal is to extract information, specifically the name, of the shapes that are clicked within the GLTF file. At this stage, I am using console ...

The CSS file seems to be ineffective when building Vue in production

In my Vue project, I am using a single file component with a chart module. In order to customize the styles of the chart module's CSS, I created a custom CSS file in the assets folder where I added lines to override certain styles (such as changing th ...

Using Vue to alter data through mutations

Greetings! I am currently in the process of developing a website for storing recipes, but as this is my first project, I am facing a challenge with modifying user input data. My goal is to create a system where each new recipe added by a user generates a u ...

JavaScript encoding and decoding challenges

Can anyone help me figure out what's wrong? I'm trying to encode and decode a simple input, but it just doesn't seem to work! Any ideas why? Thanks in advance for your assistance :) ENCODE: function encryption_encode(s, delta) { var te ...

Adjust the image's height to adapt to the size of the browser

I'm having trouble resizing the images to match the height of the browser window. My goal is to limit the images' height to a maximum of 1100px and have them scale down based on the height of the browser. I've experimented with setting the ...

Position the label and the select dropdown side by side within the sweetalert 2 component

Can anyone provide an example of aligning a label and dropdown in the same row using sweetalert2? I attempted to customize the label placement, but it appears on a separate line. I would like to log the selected dropdown item upon clicking the OK button. ...

What is the best way to preserve the updated sequence of a list that can be re-ordered?

I've been tasked with making a re-orderable list for my apprenticeship project. After incorporating drag and drop functionality using Jquery UI, I managed to display the index of each item. However, saving the new order back to the database has prov ...

The Three JS on the website is error-free, yet it fails to function properly

I've been attempting to replicate the example three.js page on my own website, complete with a canvas for the 3D animation. However, I'm encountering an issue where nothing is displayed, despite no errors appearing. I've tried troubleshootin ...

Issue where CSS modal does not appear when clicked after being toggled

I've been working on a custom modal design that I want to expand to fill the entire width and height of the screen, similar to how a Bootstrap modal functions. The goal is to have a container act as a background with another inner div for content How ...

Leveraging concealed input for transmitting additional information via asynchronous JavaScript and XML (Ajax

My current approach involves using hidden inputs to include extra values with Ajax when a form is submitted by a user. The rationale behind this strategy is that I have a lengthy list of text fields, each accompanied by a button. Upon clicking any button, ...

Any recommendations besides suggesting "g"? Let's brainstorm some other ideas for g!

Looking for some assistance with a mixin I wrote that seems to be causing a loop. Any suggestions on how to optimize the code or alternative methods to achieve the desired outcome? <div class='mh-60 pt-10'>dfgdfgsdfgsdf</div> ...

When I upload the landing page through cpanel, none of my CSS files appear to be active

I am having an issue with my webpage at . Everything looks great when I view it on my local host, but once I upload it, the CSS files and images are not loading properly. Can anyone assist me with this problem? ...

What can be done to stop a header from sticking to a table and displaying horizontally scrolling content along the border?

I need to ensure that the red headers do not overlap with the blue headers' borders while scrolling horizontally. It is essential for me to have a white border on the blue headers. .container { overflow: auto; width: 200px; } table { borde ...

The hover effect in CSS animations is turned up too high

Check out my Reddit news feed design: https://codepen.io/Teeke/pen/YxXXaE When hovering over articles, the headlines get displayed. But if the article text is too long, part of the headline may go off-screen. Instead of changing the line-height, I' ...

Calculate the sum of hours worked in a day using pure JavaScript, no external libraries required

Hello, I'm new to this website and please excuse me if my English is not perfect, I am trying my best to communicate :) I have been working on a page that calculates the total hours worked in a day and this is what I have achieved so far until 15/06 ...

Limit the maximum column gap on the grid and stop it from expanding further

I'm currently facing an issue with some columns/rows on my website that are keeping content locked in the top left corner, reminiscent of early 00's web design. The site was originally designed for smaller screens like 1024x764, so when viewed on ...

When I click on my Material UI avatar image, it seems to override the button I had in

Every time I try to create a basic category filter with images, I encounter a frustrating bug. After examining the console log, it seems that when I click on the button, my image is being clicked and behaving like an image. However, when I click around the ...

Getting checkboxes from an HTML form in Django: A comprehensive guide

I am trying to create a form that displays checkboxes for each item in a list. Here is the structure of my form: <form action="/test"> <ul style="font-size:30px"> {% for d in Dlist %} <li type="none"><input typ ...

Is there a way to pass the ng-repeat value or ID to my dynamically appended element? If so, how can I achieve

I am working on a project where I have a table with 5 data entries retrieved from a select query. My goal is to extract the ng-repeat value and ID, then transfer it to another element. As a beginner in Angularjs and HTML, I would greatly appreciate any ass ...

Resizing a scrollable list using React Refs and UseLayoutEffect

Essentially, my issue stems from having a scrollable list with a set maximum height of '100vh'. I also have a detail card beside the list that contains accordion components. When one of these accordions is expanded, it increases the height of the ...