Offspring of a Guardian with flex-grow and full width and height fails to occupy the entire parent container

My goal in the code snippet below is to make the .content divs fill the height of their parent element (.side-child) by using 100% width and height. The .side-child divs have the correct height, but I am facing an issue with getting the .content images to fill their parent while maintaining aspect ratio.

https://jsfiddle.net/d6L2bve9/5/

<div id="side">
<div class="side-child">
    <img src="https://www.icann.org/assets/icann_logo-52672386035a35504af59606040687c8.png" class="content" />
</div>
<div class="side-child">
        <img src="https://www.icann.org/assets/icann_logo-52672386035a35504af59606040687c8.png" class="content" />

</div>
<div class="side-child">
        <img src="https://www.icann.org/assets/icann_logo-52672386035a35504af59606040687c8.png" class="content" />

</div>
</div>

CSS

#side {
height : 100vh;
display : flex;
flex-direction : column;
width : 50px;
}

.content {
height : 100%;
background : #ff0000;
}

.side-child {
flex-grow : 1;
}

I found a workaround by setting the position of .side-child to relative and .content to absolute as shown below:

https://jsfiddle.net/5sgfcjy4/2/

However, I'm puzzled about why this additional step is necessary since the .side-child divs already have the correct height. Could it be because the .side-child divs do not technically have a specific height value assigned, making it challenging for 100% height to take effect?

cssflexbox

Answer №1

You have the option to implement this functionality by utilizing the following code snippet:

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.column { 
  -webkit-flex-direction: column; 
  flex-direction: column; 
  float: left;
}
.column li {
  background: deepskyblue;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 50px;
  height: 50px;
  margin: 5px;
  
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}
<ul class="flex-container column">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>

Answer №2

Is this solution suitable for your needs? 

#side {
  height : 100vh;
  display : flex;
  flex-direction : column;
  width : 50px;
}

.content {
  flex: 1 auto;
  background : #ff0000;
}

.side-child {
  display: flex;
  width : 100%;
  height : 100%;
}
<div id="side">
  <div class="side-child">
    <div class="content">
      1
    </div>
  </div>
  <div class="side-child">
        <div class="content">
      2
    </div>
  </div>
  <div class="side-child">
        <div class="content">
      3
    </div>
  </div>
</div>

Answer №3

Here's an alternative approach.

#panel {
  height : 90vh;
  display : flex;
  flex-direction : column;
  width : 60px;
}

.content-wrapper {
  width : 100%;
  background : #ff3333;
}

.panel-child {
  flex-grow: 1;
  display: flex;
  align-self: stretch;
}

https://jsfiddle.net/g8K4cNdR/4/

Answer №4

Here is the way I ended up implementing it

    #side {
    height : 100vh;
    display : flex;
    flex-direction : column;
    width : 50px;
    }

    .content {
    height : 100%;
    background : #ff0000;
    position : absolute;
    }

    .side-child {
    flex-grow : 1;
    position : relative;
    }

Link to JSFiddle demo

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 are the reasons behind the issues encountered when enabling "Optimization" feature in Angular that affect the proper rendering of PrimeNg elements?

Angular Version : 9.x Primeng Version : 9.x We've encountered an issue with PrimeNg elements not rendering correctly in our dev/prod environments, although they work fine in the local environment. After some investigation, we found that the culprit ...

javascriptcssangulartypescriptprimeng

The <span> element containing "float: right" within the style of "white-space: pre"

Take a look at the code snippet below: <div style="white-space: pre"> long time; <span style="float: right;">// know C?</span> </div> When this HTML is rendered, WebKit and Gecko produce different results. In WebKit, the conte ...

htmlcssword-wrap

I must remove the thumb from the input range control

I am looking for a way to remove the thumb from the progress bar in my music player. I have tried various methods without success, and I simply want the progress bar to move forward with color change as it advances based on the Progress variable. For refe ...

htmlcssreactjstypescript

Tips for choosing the parents sibling using CSS

How can I change the background color of the .arrow-tip class when hovering over the first <li>? Can you provide me with the correct CSS rule? Here is the HTML code: <nav> <ul> <li>Item 1</li> <li>I ...

htmlcsscss-selectors

Mastering the art of calculating the width for a responsive scroll menu

I found a useful tutorial on building a scrolling menu for smaller screen sizes. You can check it out here. However, I encountered an issue when trying to add a border width element. Whenever I define the width, it overrides the scrolling: auto; element. ...

htmlcss

Tips for ensuring that input text fills the entire width of its parent element

Is there a way to make the input text element take up 100% width of its parent container (div class="input-wrapper") while still being responsive? Using width:inherit makes it too wide for the entire viewport, and width:auto doesn't work either as it ...

htmlcss

How can I use Jquery to switch images when hovering?

I'm having trouble getting an arrow icon on my image slider to change when I hover over the image. I've tried different jquery methods, but nothing seems to be working. All I want is for the image to change without any fancy effects like fade-out ...

jqueryhtmlcss

One potential solution to reorganizing the layout is to utilize two rows instead of just one

My current form layout is not very user-friendly, as it appears to be too long for one row. I have fields for amount, note, date, and an option list. I would like to arrange the form so that amount and note are displayed in one row, followed by date and o ...

htmlcss

Full-width header with scrollable content within the viewport

Is there a way to make the header and footer expand to 100% width while keeping the middle content width variable? You can view the source at http://jsfiddle.net/9dWcZ/ HTML: <div class="header"> this is header </div> <div class="content ...

cssdomlayout

CSS Media Query Assistance - optimizing text display for mobile responsiveness

I am currently facing an issue with my CSS code where the content is displaying as one long sentence on mobile devices, requiring users to scroll to read it. I am trying to modify it so that it displays as two lines on mobile. <!-- promo banner --> ...

htmlcssresponsive-designhidden

When using the table-layout=fixed attribute in IE7, if one column does not have a specified width property, the table's width will

Is there a way to make a table render with minimal width based on its content? I'm facing an issue with IE7 where it insists on expanding the table to 100% width. The code snippet below works fine in Firefox and IE8, but not in IE7: <!DOCTYPE HTM ...

htmlcssinternet-explorer-7widthtablelayout

I don't want my background image to repeat, but I'm not sure how to stretch out the tile

Hey there, I would appreciate it if you could refrain from criticizing me or giving me negative feedback as I have put in the effort to search for an answer. After extensive research, this is what I have found so far. My goal is to set a background image f ...

htmlcss

Can the rounded corners created by the CSS property "border-radius" be made non-clickable?

Can the rounded borders created by "border-radius" be made unclickable and undetectable when hovering over them? ...

javascriptjqueryhtmlcss

Tips on neatly wrapping both input fields and buttons inside a div element

Can you assist me? I'm struggling to understand why my elements are displaying incorrectly. I want them to be centered within a div with a background color, but for some reason, the div is pushed to the back and it seems like my elements are outside ...

htmlcss

Is there a way to incorporate two Bootstrap navbars on a single page that are of varying heights?

Utilizing Bootstrap 3.0 with dual navbars on a single page that adjust in height using the same variable for both .navbar blocks. Despite attempting to incorporate an additional class to alter the height of the initial navbar, it remains unaffected. Check ...

csstwitter-bootstrapnavbar

Setting a specific width for a span element

Can you take a look at my screenshot? Even after I set the width, the span width remains "auto." https://i.sstatic.net/YQZwO.png Check out the code snippet below: <div class="container"> <div class="row"><span style="width:60px;backgr ...

htmlcss

Arranging the alignment of list item text with CSS/HTML

Consider this HTML snippet: <ul><li><p>With paragraph</p></li></ul> <ul><li>Without paragraph</li></ul> and the corresponding CSS: ul { list-style-position: inside; } In the first list item, t ...

htmlcss

What about a CSS element that is partially fixed?

I distinctly recall coming across an example of this not too long ago, although I am struggling to locate the specific website. It involved a button or something of that nature situated at the top of the screen, which then remained in place as you scrolle ...

javascripthtmlcss

The radio button's checked attribute fails to function

I am currently working on adding a hover effect to radio button labels, and while it is functioning correctly, I would like to achieve the following: When a radio button is selected, I want the corresponding label to have a background color. Despite tryi ...

htmlcssradio-button

Tips for making a table header span multiple columns in HTML5

Could someone help me with making my HTML5 heading span across the columns in the table? I want the table to end on the far right with the vertical line appearing at the right end of the table. Any assistance would be greatly appreciated! For reference, ...

htmlcss