The element defined with the CSS properties `flex-basis: 0px; flex-grow: 1;` is refusing to expand beyond its initial width of 0 pixels

I am trying to maximize an item by using the flex-grow property. However, I have encountered some issues with my code:

div {
  display: flex;
  flex-direction: column;
  border: 1px solid #A8F;
}

span {
  flex-basis: 0px;
  flex-grow: 0;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid #8AF;
}

span.selected {
  flex-basis: 0px;
  flex-grow: 1;
  border: 1px solid #FA8;
}
<div>
  <span>Item 1</span>
  <span class="selected">Item 2</span>
</div>

When running the code above, nothing is displayed as expected. The item with the class selected should be taking up all available space due to flex-grow: 1, but it remains at 0px.

What could be causing this 0px height issue in my CSS?

EDIT: For those facing a similar problem, I managed to solve it by using JavaScript to dynamically adjust the height of the container based on the content inside. By manipulating the flex properties, you can achieve smooth animations.

cssflexbox

Answer №1

When using flex-direction: column; along with other flex settings but no specified container height, the browser may struggle to determine how tall the element should be. This issue does not arise when using flex-direction: row; since the height remains unaltered.

To resolve this, you can set a height or min-height so that the selected item has a clear understanding of how much it should grow in height.

div {
  display: flex;
  flex-direction: column;
  border: 1px solid #A8F;
  min-height: 100px;
}

span {
  flex-basis: 0px;
  flex-grow: 0;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid #8AF;
}

span.selected {
  flex-basis: 0px;
  flex-grow: 1;
  border: 1px solid #FA8;
}
<div>
  <span>Item 1</span>
  <span class="selected">Item 2</span>
</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

What causes the position: sticky; property to fail in React implementations?

Currently, I am facing a challenge in making two sidebars sticky so that they will follow as the user scrolls until they reach the bottom of the page. In my current editing project, this implementation seems to be more complex compared to other programs w ...

cssreactjs

Opera's extra space feature allows users to comfortably browse the

I'm attempting to insert a progress bar inside a td element within my table. Below is the code: <td style="width: 150px;"> <div style="height: 16px; max-height: 16px; overflow: hidden; border: 1px solid #80C622;"> < ...

csslayoutopera

Overflow is not functioning as intended

Here is the CSS code I am using for the #Wall div: #Wall { z-index:0; position: absolute; left: 50%; top: 0px; margin-left: -952px; width: 1920px; height: 1200px; overflow: hidden; } This code creates a clickable wallpaper advertising image. However, ...

css

Steps for positioning an image to overlap the background image

Do I need JavaScript or is HTML and CSS sufficient? If so, should I utilize position or other properties for that? If my description is unclear, a visual demonstration in the form of an image might help. ...

htmlcss

Unique backgrounds with varied images on each grid block

Hi there! I'm currently exploring options to display different images for each section of a grid I've put together: Take a look at the CSS I'm using: background-image: url("my_image.jpg"); background-size: 50px auto; float: right; height: ...

javascriptjqueryhtmlcss

Positioning the label for a Material-UI text field with an icon adornment when the shrink property is set

https://i.stack.imgur.com/E85yj.png Utilizing Material-UI's TextField, I have an Icon embedded within. The issue arises when the label "Your good name here" overlaps the icon instead of being placed beside it. This problem emerged after I included ...

javascriptcssreactjsmaterial-ui

Is it possible to apply a style change to several components at once using a single toggle switch

I am looking to implement a day/night feature on my web app, triggered by a simple toggle click. While I can easily add this feature to a single component using the navigation menu, I am faced with the challenge of incorporating it into multiple component ...

htmlcssangulartypescript

Eliminating the bottom border of all buttons, except for the last three buttons in the list, solely using pure JavaScript, unless alternative methods are available

I have 3 sets of buttons, with each set containing 9 buttons stacked in 3 columns inside an ordered list (ol) within list items (li). I have removed the bottom border of the buttons to avoid double borders since they are stacked on top of each other withou ...

javascripthtmlcss

Concealing and revealing an image with the onMouseOver and onMouseOut events - image quickly reemerges

After writing the following jQuery script, I encountered an issue. <script type="text/javascript"> $(document).ready(function(){ $('#Oval-1').on('mouseover', function(e) { $("#Oval-1").fadeOut ...

javascriptjqueryhtmlcsssvg

Modal footer obstructing popover in modal body

I'm facing an issue with a Bootstrap 4 modal that contains buttons, one of which is supposed to trigger a custom popover div centered below it. The popover works fine outside the modal, but within the modal, it's partially hidden. After trying v ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-modal

A guide to building a dynamic form slider that showcases variable output fields with Javascript

I'm interested in creating a Slider Form that shows different output fields when sliding, using Javascript. Something like this: https://i.sstatic.net/3Isl4.png Could anyone provide suggestions on how to achieve this or share any links related to so ...

javascripthtmljquerycss

Hover function not functioning properly

I can't figure out why this hover effect isn't working, there doesn't seem to be a negative z-index or anything like that. At most, it just flashes on hover; .menu{ border-radius: 50%; width: 100px; height: 100px; background: white; box-sha ...

csshover

The functionality of "Priority Nav" is compromised when a div is floated

I am currently utilizing the "Priority Navigation" design technique. This means that when the viewport width is reduced and there isn't enough space for all the list-items to fit horizontally, they are moved into another nested list under a "more" lin ...

javascriptjquerycsshtmlresponsive-design

Cut off text inside an HTML anchor element using an ellipsis, while ensuring the image remains at the end - all without the need for JavaScript

How can I truncate link text on a header with an ellipsis but keep the image at the end as a glyphicon? And all of this without using JS. Here's my code: <!DOCTYPE html> <html> <body> <ul> <li> <a href="# ...

htmlcssimagehyperlinkhover

Can I make this SCSS code functional within CSS styling?

I stumbled upon this interesting +/- toggle button design on a codepen here The only problem is that the CSS processor used in the codepen is SCSS, and when I try to convert it to CSS, it stops functioning. My website project is using CSS, and when I try ...

csssass

Having Trouble with the Bootstrap Responsive Menu Button Not Working

I'm struggling with the Bootstrap menu I created, as it's not collapsing or animating. Everything seems to be working fine except for the button that isn't functioning. <nav class="navbar navbar-expand-lg navbar-light bg-dark alb ...

htmlcsstwitter-bootstrapbootstrap-4menu

The concept of see-through backgrounds

I am trying to achieve a more transparent header-menu background, so that the YouTube video underneath it becomes more visible. You can check it out here Unfortunately, the trick mentioned above did not work as expected. .masthead:not(.mixed-header) { ...

htmlcss

What is the best way to give a decorative border to a pseudo-element's before content?

Hey there, I have a question. I created a block with a protruding corner at the top and applied a corner effect using box-shadow. How can I achieve the same effect for a pseudo-element (.comment_text:before) https://i.sstatic.net/laEIJ.png .comment{ ...

css

Allocating the remaining container space to a lone flex item

Imagine a scenario where I have a flex container with children that completely fill the container. .container { display: flex; width: 150px; } .item { flex: 1 1 50px; border: 1px solid blue; } <div class="container"> <div class="item ...

htmlcsslayoutflexbox

Combining Tailwind with Color Schemes for Stylish Text and Text Shadow Effects

tl;dr I have a utility class in my tailwind.config.ts for customizing text shadows' dimensions and colors. However, when using Tailwind Merge, I face conflicts between text-shadow-{size/color} and text-{color}. The Issue In CSS, text shadows are oft ...

javascriptcssreactjsnext.jstailwind-css