时间戳

首页 > 解决方案 > 高度为 100% 时如何阻止弹性项目溢出父项

html - 高度为 100% 时如何阻止弹性项目溢出父项

问题描述

如果您查看示例代码段，我正在尝试#feature_header_container（以红色）扩展以填充剩余的高度，header但是因为我在里面有其他内容header，<p>如图所示，当我设置它height: 100%时#feature_header_container它会溢出header但我希望它只扩大 的剩余高度header，我该怎么做？

现在，#feature_header_container（红色）在外部溢出header并被<p>内部的第一个元素向下推header。

*
{
	font-family: Arial;
	box-sizing: border-box;
}

html, body
{
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

header
{
	display: block;
	height: 100%;
	min-height: 100vh;
	background-color: #21D4FD;
	background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);

	-webkit-box-shadow: 0px 10px 14px -6px rgba(0,0,0,0.57); 
	box-shadow: 0px 10px 14px -6px rgba(0,0,0,0.57);

	border-radius:  0 0 80px 80px;

	padding-left: 10%;
	padding-right: 10%;
}

#p_test
{
  display: inline-block;
}

#feature_header_container {
  display: flex;
  height: 100%;
	margin-top: 20px;
  background-color: red;
  align-items: center;
}

#feature_container {
  display: inline-flex;
  flex-grow: 1;
  justify-content: center;
  background-color: blue;
  color: white;
}

.feature_box {
  background-color: pink;
}
<html>

  <body>

    <header>
    
    <p id="p_test">
    Test Test Test
    </p>

      <div id="feature_header_container">

        <div id="feature_container">

          <div class="feature_box">
            <p>Test</p>
          </div>

          <div class="feature_box">
            <p>Test</p>
          </div>

          <div class="feature_box">
            <p>Test</p>
          </div>

        </div>

      </div>

    </header>
    
    <main>
      <p>TesttestTesttestTesttestTesttestTesttest</p>
    </main>

  </body>

</html>

标签： htmlcssflexbox

解决方案

感谢遇到这个小提琴：https ://jsfiddle.net/MadLittleMods/LmYay/

我设法解决了我的问题并有一个工作示例：https ://jsfiddle.net/p459qvfk/2/

工作示例复制过来：

* {
  font-family: Arial;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  flex-direction: column;

  justify-content: flex-start;
  /* align items in Main Axis */
  align-items: stretch;
  /* align items in Cross Axis */
  align-content: stretch;
  /* Extra space in Cross Axis */
  min-height: 100vh;
  background-color: #21D4FD;
  background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);

  -webkit-box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.57);
  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.57);

  border-radius: 0 0 80px 80px;

  padding-left: 10%;
  padding-right: 10%;
}

#p_test {
  display: inline-block;
}

#feature_header_container {
  display: flex;
  flex: 1;
  background-color: red;
  align-items: center;
}

#feature_container {
  display: inline-flex;
  flex: 1;
  justify-content: center;
  background-color: blue;
  color: white;
}

.feature_box {
  background-color: pink;
}
<html>

  <body>

    <header>

      <p id="p_test">
        Test Test Test
      </p>

      <p id="p_test">
        Test Test Test
      </p>

      <div id="feature_header_container">

        <div id="feature_container">

          <div class="feature_box">
            <p>Test</p>
          </div>

          <div class="feature_box">
            <p>Test</p>
          </div>

          <div class="feature_box">
            <p>Test</p>
          </div>

        </div>

      </div>

    </header>

    <main>
      <p>TesttestTesttestTesttestTesttestTesttest</p>
    </main>

  </body>

</html>

推荐阅读