Issues with flex grow and flex shrink not being effective arise when an adjacent flex element contains lengthy text

How can I ensure that the color swatch fills the designated space in the CSS (width: 40px) while allowing the label to shrink? The issue arises when the label is a long word such as "Corn flower blue", causing the color swatch to shrink instead of maintaining its width.

I have attempted to use Bootstrap 4 classes, specifically flex-fill and flex-grow-1 on the color swatch and flex-shrink-1 on the swatch label, but none of these combinations seem to work.
https://getbootstrap.com/docs/4.3/utilities/flex/#grow-and-shrink

For a working example, refer to the following Codepen link:
https://codepen.io/ben_jammin/pen/Vwadqqb

.container {
  background-color:red;
}
.sidebar {
  width:280px;
  padding:1.5rem;
  background-color:#efefef;
}
li {list-style-type: none;}
.color-swatch {width:40px; height:40px;}
<div class="container">
<div class="sidebar">
<ul class="swatches d-flex flex-wrap m-0 pl-0" role="menu">
    <li class="swatch mb-2 col-6 px-0">
        <a class="d-flex align-items-center" href="#">
      <!-- Swatch -->
         <span class="color-swatch d-flex flex-grow-1" style="background-color:black;"></span> 
      <!-- Swatch Label -->
         <span class="stacked label ml-2 d-flex">Black</span></a>
    </li>
  <li class="swatch mb-2 col-6 px-0">
        <a class="d-flex align-items-center" href="#">
      <!-- Swatch -->
         <span class="color-swatch d-flex flex-grow-1" style="background-color:blue;"></span> 
      <!-- Swatch Label -->
         <span class="stacked label d-flex ml-2">Blue</span></a>
    </li>
  <li class="swatch mb-2 col-6 px-0">
        <a class="d-flex align-items-center" href="#">
      <!-- Swatch -->
         <span class="color-swatch d-flex flex-grow-1" style="background-color:cornflowerblue;"></span> 
      <!-- Swatch Label -->
         <span class="stacked label d-flex ml-2">Corn flower blue</span></a>
    </li>
  <li class="swatch mb-2 col-6 px-0">
        <a class="d-flex align-items-center" href="#">
      <!-- Swatch -->
         <span class="color-swatch d-flex flex-grow-1" style="background-color:forestgreen;"></span> 
      <!-- Swatch Label -->
         <span class="stacked label d-flex ml-2">Forest green</span></a>
    </li>
  <li class="swatch mb-2 col-6 px-0">
    <a class="d-flex align-items-center" href="#">
      <!-- Swatch -->
     <span class="color-swatch d-flex flex-grow-1" style="background-color:gray;"></span> 
      <!-- Swatch Label -->
     <span class="stacked label d-flex ml-2">Gray</span></a>
  </li>
  <li class="swatch mb-2 col-6 px-0">
    <a class="d-flex align-items-center" href="#">
      <!-- Swatch -->
     <span class="color-swatch d-flex flex-grow-1" style="background-color:darkblue;"></span> 
      <!-- Swatch Label -->
     <span class="stacked label d-flex ml-2">Midnight Blue</span></a>
  </li>
</ul>
  
</div>
</div>

csstwitter-bootstrapbootstrap-4flexbox

Answer №1

Your custom CSS styles are being overridden by the Bootstrap classes d-flex and flex-grow-1 on the swatches.

To fix this issue, consider removing those classes and modifying the sizes of your swatches and labels according to your preferences.

Answer №2

You may need to adjust the flex classes you are using.

By adding flex-grow-1 to the color-swatch and flex-shrink-1 to the label, you are essentially instructing the swatch to expand to fill all available space and the label to shrink if necessary. This may not achieve the desired result. What you really want is for the color-swatch to maintain its size without shrinking.

To achieve this, you can utilize the flex-shrink-0 class. Applying this class to all your color-swatch elements will keep them at a fixed size of 40x40px while allowing the label to occupy any remaining space. Additionally, you can remove the d-flex class from both the color-swatch and label elements:

<a class="d-flex align-items-center" href="#">
    <!-- Swatch -->
     <span class="color-swatch flex-shrink-0" style="background-color:black;"></span>
     <!-- Swatch Label -->
     <span class="stacked label ml-2">Black</span>
</a>

It might also be beneficial to add align-items-center to your ul element. For instance, "cornflower blue" wraps to two lines, so adding this class will vertically center "Forest Green."

Example of the Solution:

.container {
  background-color: red;
}

.sidebar {
  width: 280px;
  padding: 1.5rem;
  background-color: #efefef;
}

li {
  list-style-type: none;
}

.color-swatch {
  width: 40px;
  height: 40px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
  <div class="sidebar">
    <ul class="swatches d-flex flex-wrap m-0 pl-0 align-items-center" role="menu">
      <li class="swatch mb-2 col-6 px-0">
        <a class="d-flex align-items-center" href="#">
          <!-- Swatch -->
          <span class="color-swatch flex-shrink-0" style="background-color:black;"></span>
          <!-- Swatch Label -->
          <span class="stacked label ml-2">Black</span></a>
      </li>
      <li class="swatch mb-2 col-6 px-0">
        <a class="d-flex align-items-center" href="#">
          <!-- Swatch -->
          <span class="color-swatch flex-shrink-0" style="background-color:blue;"></span>
          <!-- Swatch Label -->
          <span class="stacked label ml-2">Blue</span></a>
      </li>
      <li class="swatch mb-2 col-6 px-0">
        <a class="d-flex align-items-center" href="#">
          <!-- Swatch -->
          <span class="color-swatch flex-shrink-0" style="background-color:cornflowerblue;"></span>
          <!-- Swatch Label -->
          <span class="stacked label ml-2">Corn flower blue</span></a>
      </li>
      <li class="swatch mb-2 col-6 px-0">
        <a class="d-flex align-items-center" href="#">
          <!-- Swatch -->
          <span class="color-swatch flex-shrink-0" style="background-color:forestgreen;"></span>
          <!-- Swatch Label -->
          <span class="stacked label ml-2">Forest green</span></a>
      </li>
      <li class="swatch mb-2 col-6 px-0">
        <a class="d-flex align-items-center" href="#">
          <!-- Swatch -->
          <span class="color-swatch flex-shrink-0" style="background-color:gray;"></span>
          <!-- Swatch Label -->
          <span class="stacked label ml-2">Gray</span></a>
      </li>
      <li class="swatch mb-2 col-6 px-0">
        <a class="d-flex align-items-center" href="#">
          <!-- Swatch -->
          <span class="color-swatch flex-shrink-0" style="background-color:darkblue;"></span>
          <!-- Swatch Label -->
          <span class="stacked label ml-2">Midnight Blue</span></a>
      </li>
    </ul>

  </div>
</div>

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

Is the whitespace-pre-line feature of TailwindCSS experiencing issues?

whitespace-pre-line doesn't seem to be working for me. I attempted to replicate the same code from my text editor on https://play.tailwindcss.com/, and it worked perfectly. Below is a screenshot that I have attached. This is the sample code in my tex ...

htmlcsstailwind-css

Using Slick Slider and Bootstrap CSS to display text on top of images

Currently, I am utilizing the slick slider from and I want to overlay text on top of the image. I tried using bootstrap carousel-caption, which works well with any image. However, with slick slider, it seems like the text is not at the highest level as I ...

javascriptcss

Utilize JQuery to implement fading effects for clicked elements in a webpage

I've been using a rollover JavaScript plugin to create smooth transitional effects when users hover over clickable page elements. Everything was going well until I decided to switch to making ajax calls instead of page loads for dynamic content. The p ...

javascriptjqueryhtmlcss

Lines are showing up on the screen, but their origin within the html or css remains a

While creating my website, I encountered a minor issue. Some elements like div or text element are showing lines when hovered over with the mouse, but they disappear once clicked elsewhere. Surprisingly, there is no border defined for them. I am stuck at ...

htmlcssbootstrap-4

Padding-left may cause text to not wrap correctly

Every link in the left menu has a padding-left: 15px;. This is done to accommodate a background image (the blue arrow). However, when text wraps (like in "Paintings, prints, and watercolours"), it seems to ignore the padding. I've searched extensive ...

htmlcss

Revamp responsiveness in bootstrap 3 for printing with @media queries

My goal is to disable the responsive features of bootstrap when the event javascript:print() is triggered. This way, I want my webpage to maintain the column grid layout that I have defined, regardless of screen size. One solution suggested in this answer ...

javascriptcsstwitter-bootstrapmedia-queries

Tips for ensuring consistent spacing between font icons within a navigation bar when using text with font icons as links

Below is the code I have implemented for a navigation bar: body { margin: 0; } .navbar { display: inline-block; background-color: #495057; width: 100%; } .navbar ul { list-style-type: none; text-align: center; float: left; } .navbar ul ...

htmlcsshtml-lists

The final item in the navigation bar is off-center

After centering all text within the li tags, the last one appears to be slightly closer to the bottom. Below is the code snippet along with an image: *{ margin:0; padding:0; box-sizing:border-box} #hamburgerClick{ displa ...

css

Determining the nth-child within a given table or container

I have various divs within a container with the same class (class="myDiv"). The positioning of these divs inside the container can vary... The goal is to style all divs with the class .myDiv as follows: the first div should have color "red" the second d ...

htmlcss

How to dynamically adjust column width based on maximum content length across multiple rows in CSS and Angular

I am attempting to ensure that the width of the label column in a horizontal form is consistent across all rows of the form based on the size of the largest label. Please refer to the following image for clarification: Screenshot Example All label column ...

cssangularformslayoutbootstrap-4

Link the Sass variable to Vue props

When working on creating reusable components in Vue.js, I often utilize Sass variables for maintaining consistency in colors, sizes, and other styles. However, I recently encountered an issue with passing Sass variables using props in Vue.js. If I directly ...

javascriptcssvue.jssass

The absence of underlines for <a href> and <u> is causing an issue

Below is a snippet of code that I am working with: echo "<form> <div id=\"error\"align=\"center\">"; echo "You've either entered the incorrect <b>username</b> or incorrect <b>passwor ...

htmlcss

Modify the navbar background color in bootstrap-vuejs

As per the information provided in the documentation, the instructions for setting styles for the navigation bar are as follows: <b-navbar toggleable="lg" type="dark" variant="info"> <!-- Or --> <b-navbar toggleable="lg" type="dark" variant ...

cssvue.jsbootstrap-vue

The altered variable refuses to show up

Currently, I am working on a project to create a Skate Dice program that will select random numbers and display the results simultaneously. Unfortunately, I have encountered an issue where the randomly generated number is not being shown; instead, it dis ...

javascripthtmlcss

Resolve the issue with the sticky positioning

I'm dealing with a table and struggling to make the CSS sticky position work. Can someone help me troubleshoot? .table_wrapper { width: 100%; height: 400px; overflow: auto; position: relativ ...

htmlcsscss-positionsticky

A unique and dynamic design concept for my website: a zigzagging structure

I am trying to achieve a layout similar to the one at the provided link, with variable sized div tags on the left and right edges. Can someone please assist me in styling the left and right sides accordingly? Key styles I have used: .rightside { margin-l ...

htmlcss

What is the process for altering the color of a table using JavaFX?

In my JavaFX application, I'm working with a table and I want users to be able to change the color of the selected element using a color picker. However, when I attempt the following code: menuBar.setStyle("-fx-background-color:" + settings.getRgbSt ...

javacssjavafx

Trouble with Bootstrap 5 modal remaining open

It seems like I may have overlooked something simple. Currently, I am trying to open a modal programmatically using $("#exampleModal").show(); Although the modal opens correctly, I am encountering an issue where the dark overlay behind the moda ...

twitter-bootstrapbootstrap-5

Adjusting Text Color on Buttons

I am looking for a simple button with clear color and black text, but the default button has white text. I need a way to change the text color. Check out my current app <View style={styles.fastlog}> <Button style={styles.bouton} title= "Con ...

cssreactjsreact-native

Adjusting the background color using CSS according to the browser's dimensions

I'm having trouble identifying the issue with this code. The background color remains white and doesn't change as expected. <style type="text/css"> h1 { position: absolute; text-align: center; width: 100%; ...

htmlcssmedia-queriesbackground-color