height:100%子元素被前置兄弟挤压，求替代table继承的布局方案

Hey there! I totally get how frustrating it is when the table+inherit trick falls flat, and calc() is useless because your sibling content is dynamic. Let’s fix this using Flexbox—it’s perfect for this exact scenario where you need an element to fill remaining space without hardcoding heights.

Why Your Current Setup Isn’t Working #

Your .h100 classes are setting height:100%, but this inherits the full height of the parent container—including the space taken up by the button siblings. That’s why the yellow div is overflowing instead of fitting the remaining space.

The Flexbox Fix #

Flexbox was designed to handle flexible space distribution. Here’s how to adapt your code:

• Convert parent containers to flex columns: Any container with both dynamic content (like buttons) and a child needing to fill remaining space should use display: flex; flex-direction: column;.
• Use flex:1 on the space-filling child: This tells the element to take up all available remaining space in the flex container, regardless of the sibling content’s height.

Modified Full Code #

<!DOCTYPE html>
<html>
<head>
<style>
* { box-sizing: border-box; }
.h100 { height: 100%; }
.flex-col { 
  display: flex; 
  flex-direction: column; 
}
.flex-fill { 
  flex: 1; /* Takes up remaining available space */
}
</style>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="box-sizing: border-box; height: 100vh !important; margin: 0; padding: 2em; display: flex; flex-direction: column;">
<button>test button</button>
<br>
<button>test button</button>
<br>
<button>test button</button>
<div class="h100 flex-col flex-fill" style="background-color: red;padding: 2em;">
<button>test button</button>
<br>
<button>test button</button>
<br>
<button>test button</button>
<div class="flex-col flex-fill" style="background-color:blue;padding: 2em;">
<button>test button</button>
<br>
<button>test button</button>
<br>
<button>test button</button>
<div class="flex-fill" style="background-color:yellow;">
test yellow
</div>
</div>
</div>
</body>
</html>

Breakdown of Key Changes #

• Body: Set to flex-direction: column so the red div fills the remaining viewport space (via flex:1) after the top buttons.
• Red div: Also a flex column, so the blue div fills its remaining space after its internal buttons.
• Blue div: Flex column, with the yellow div using flex:1 to take up whatever space is left after its buttons.

Why This Works for Your Requirements #

• No overflow:hidden needed: The flex container naturally contains the flex:1 child without overflow (as long as the parent has a defined height, which your body does with 100vh).
• Dynamic content friendly: flex:1 automatically adjusts to any height of the sibling buttons—no need for calc() or hardcoded values.
• No weird table workarounds: Flexbox is modern, widely supported, and intuitive for this type of layout.

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