When flex items refuse to shrink despite using flex-shrink

I'm struggling to shrink the flex items in my layout despite using the flex-shrink property. I've experimented with adjusting the vh and vw values of the .row (flex parent), playing around with margins and padding, but still, the items won't shrink. Any guidance on how to correct this issue would be greatly appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex properties</title>
    <link rel="stylesheet" href="dist/css/styles.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col container--box">
                <h1 class="container--box__text">1</h1>
            </div>
            <div class="col container--box">
                <h1 class="container--box__text">2</h1>
            </div>
            <div class="col container--box">
                <h1  class="container--box__text">3</h1>
            </div>
            <div class="col container--box">
                <h1 class="container--box__text">4</h1>
            </div>
            <div class="col container--box">
                <h1 class="container--box__text">5</h1>
            </div>
        </div>
    </div>
</body>
</html>
body {
  background-color: #a09b9b;
}
body .container {
  border: 2px solid green;
  width: 70vw;
}
body .container .row {
  display: flex;
  flex-flow: row nowrap;
  height: 25vh;
}
body .container .row .col:nth-child(1) {
  flex-shrink: 1;
}
body .container .row .col:nth-child(2) {
  flex-shrink: 1;
}
body .container .row .col:nth-child(3) {
  flex-shrink: 3;
}
body .container .row .col:nth-child(4) {
  flex-shrink: 1;
}
body .container .row .col:nth-child(5) {
  flex-shrink: 1;
}
body .container .row .col {
  background-color: red;
  border: 1px solid black;
  margin: 0;
  padding: 50px;
  height: 20%;
}
body .container .row .col .container--box__text {
  font-size: 30px;
}

Answer №1

To ensure the flex-shrink property functions correctly.

Eliminate the fixed padding from .container--box:

body .container .row .col .container--box {
  padding: 0;
}

Here is the revised css code

body {
  background-color: #a09b9b;
}

body .container {
  border: 2px solid green;
  width: 70vw;
}

body .container .row {
  display: flex;
  flex-flow: row nowrap;
  height: 25vh;
}

body .container .row .col {
  flex: 1;
  flex-basis: 0;
  background-color: red;
  border: 1px solid black;
  margin: 0;
  height: 20%;
}

body .container .row .col .container--box {
  padding: 0;
}

body .container .row .col .container--box__text {
  font-size: 30px;
}

Answer №2

It appears that you are attempting to utilize the flex-shrink property to manage the shrinking behavior of flex items, but there are some key points to keep in mind:

  • The height of the flex container has been set to 25vh, meaning 25% of the viewport height. If the content within the container exceeds this height, it may not impact the flex-shrink property.

  • The height property for the flex items is defined as 20%. With five flex items, the total height surpasses the container height, potentially preventing the desired effect of the flex-shrink property.

Here is an example where adjustments have been made to the container height and flex item height:

body {
     background-color: #a09b9b;
}

body .container {
     border: 2px solid green;
     width: 70vw;
}

body .container .row {
     display: flex;
     flex-flow: row nowrap;
     height: 40vh; /* Increased container height */
}

body .container .row .col {
     background-color: red;
     border: 1px solid black;
     margin: 0;
     padding: 20px; /* Reduced padding */
     flex-shrink: 1; /* Added flex-shrink property */
}

body .container .row .col .container--box__text {
     font-size: 30px;
}

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

Color scheme for navigation bar carousel item background color

I have a navigation bar and carousel within the same section. I want to change the background color of both the navigation bar and carousel item when the carousel indicator becomes active. Any suggestions on how to achieve this using a jQuery function? H ...

Techniques for adjusting the dimensions of a select dropdown using CSS

Is there a way to control the height of a select dropdown list without changing the view using the size property? ...

Modify the color scheme of the parent div by selecting the child div (using only CSS and HTML)

I am working with a nested div structure, where one is contained inside the other: <div class="outer"> <div class="inner"> </div> </div> It looks something like this: https://i.sstatic.net/r5qbD.png I ...

Make the div disappear after a specified time

Does anyone know of a code snippet that can make a couple of div elements fade out after a specific time period? Currently, I have the following example: <div id="CoverPop-cover" class="splash"> <div id="CoverPop-content" class="splash-center"> ...

Tips for updating mysql records on a web page without the need to refresh it using PHP

Consider this situation: Below is the code that shows all user accounts. <table border="3px" align="center" cellspacing="3px" cellpadding="3px"> <tr> <td>Username</td> <td>Password</td> <td><a href="" oncli ...

How can I eliminate the white bar elements from my dropdown menu? Also, seeking guidance on replacing an empty <div> tag in a boolean query

Can anyone help me understand the strange white border around my dropdown menu and guide me on how to remove it? I am currently using DropdownButton from react bootstrap. I have attempted to adjust the CSS with no success. Here is the code I tried: .Navig ...

Transitions fail to appear correctly when the page first loads

I need to fill a gauge meter based on a variable sent to the html file. To achieve this, I have initially set the value to zero: transform:rotate(.0turn); transition: all 1.3s ease-in-out; However, when the HTML is first loaded or refreshed (with F5 ...

A mesmerizing Fullscreen CSS Slideshow that creates a stunning double fade in/out effect for overlaid elements on background slide elements

Looking to create a unique slide show using background images and text with specific animations? Check out this jsfiddle. This slideshow features cover background images, displaced text, and button-controlled transitions without auto loop animation. Each ...

Can you explain the process of NuxtJS css extraction for creating static websites?

I am currently working on creating a static website using my minimal code with Nuxt. This code includes integration of the tailwindcss toolkit and vue2-leaflet. When I run nuxt generate I end up with two CSS files - one for the tailwindcss styles and an ...

Trouble with CSS solution for fixed header/columns in HTML table on Firefox

My current project involves implementing sticky headers/columns on a table for the client. Unfortunately, using a real script for this purpose is not feasible due to an already high object count on the page which is resulting in speed issues. However, I h ...

Troubleshooting Issue with Importing File into CSS Document

I'm currently working on building a website and I've been trying to import an image to use as the header. I want to add this .png picture to my CSS file, but despite extensive research and double checking everything, I still can't figure out ...

Tips on how to change an image tag into a CSS selector

I need to change this tag to a WebElemet using CSS Selector instead of Xpath. I attempted with Xpath as shown below: panelSectionTitle.find( By.cssSelector( "img.aw-layout-right[style='']" ) ) <img style="" class="aw-layout-right" height="2 ...

What's the best way to implement a font family in a React component?

I'm currently attempting to implement the font found at: https://fonts.google.com/specimen/Source+Code+Pro After downloading the font into my directory, it appears as shown in this image: enter image description here This is how I have it set up: &l ...

How can you position an image overlay with multiple text elements using the 'align-items-end' property, all within a block layout?

I am facing a challenge in creating an image with overlay text (H3 above a p), where the text should be displayed at the bottom left without breaking the block and going inline. Currently, with my code, I am seeing the block elements of text change to in ...

To horizontally center a fixed element in HTML and set its width to match the parent's,

Is there a way to center a fixed div inside its parent element? I'm trying to make the fixed div have the same width as its parent, but it's not working. What could be causing this issue? Check out this example on jsFiddle Here is the HTML code ...

Animating lines with JQuery beneath navigation links

Currently in the process of revamping my portfolio website, and it's still a work in progress. Recently stumbled upon a jquery tutorial that enables a line to animate under anchor elements on hover, which I find quite intriguing. However, I am facing ...

Advantages of using individual CSS files for components in React.js

As someone diving into the world of Web Development, I am currently honing my skills in React.js. I have grasped the concept of creating Components in React and applying styles to them. I'm curious, would separating CSS files for each React Component ...

Is there a way to make a TABLE expand to match the height of its surrounding element? (or, tackling sluggishness in IE with JavaScript)

I am facing a challenge with a web page where I have a table nested inside of a TD tag. Despite the unconventional approach, I need to ensure that the height of the nested table matches the height of the TD cell containing it upon page load. Currently, I a ...

Troubleshooting a Border Problem in CSS

Just joined this site and I'm new to coding, eager to learn more. I'm trying to make the border of this grey box grey, with the rest being blue. I've searched online but can't find exactly what I need. The grey area is 200px wide and ...

Alter the webpage's background color using setInterval while also implementing automatic scrolling based on active records

I've created a row of blinking div elements with a time interval, ensuring that only one div blinks at any given moment. To see it in action, please view the demo below: var arr = $(".boxes"); var current = 0; function bgChange() { if (a ...