如何让fixed定位的flex父元素中partc始终撑满剩余高度？

Got it, let's get your golden .partc block stretching all the way to the bottom of its parent, while keeping its height fixed even when you hide content via JavaScript. Here's the straightforward fix:

Why It Wasn't Working Before #

Your parent container .mdtags uses flex-direction: column, but .partc wasn't set to take advantage of flex layout's space allocation. By default, flex items only take up the height of their content—we need to tell .partc to fill the remaining vertical space.

Modified Code #

First, update the CSS for .partc to add flex: 1:

.mdtags{ 
  position:fixed; 
  display:flex; 
  flex-direction:column; 
  height:calc(100% - 50px); 
  width:200px; 
  left:calc(50% - 150px); 
  top:40px; 
  background:lightblue; 
}
.partc{ 
  background:gold; 
  overflow-y:scroll; 
  flex:1; /* This is the key addition */
}

The HTML stays the same:

<div class='mdtags'>
 <div class='parta'>323</div>
 <div class='partb'>525</div>
 <div class='partc'>727</div>
</div>

How It Works #

• flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, and flex-basis: 0%. In a vertical flex container, this tells .partc to take up all remaining vertical space after the heights of .parta and .partb are accounted for.
• Since .partc is now using the fixed space allocated by the parent container, hiding content with JavaScript won't change its height—instead, the scrollable area will adjust to fit the remaining content, keeping the block's size consistent.

Quick Notes #

• Make sure the parent .mdtags has a fixed or calculated height (which it does with calc(100% - 50px))—this is required for flex space allocation to work correctly.
• No need to set a specific height on .partc anymore; flex handles it automatically.

内容的提问来源于stack exchange，提问作者user7461846