javascript - 使用 display flex 让只有一个 child 占据 parent 100% 的高度？

Question

在下面的代码中，我将 div 与类 container 的 display 属性设置为 flex 并且它有两个 div 类 sidebarcontainer 和 mainpage 的 child ，我希望 div 类 'sidebarcontainer' 占 100% 高度父分区。

代码:https://jsfiddle.net/dydjgp9g/

但实际上我不一定希望 display: flex 成为父级，但如果我删除而不是整个页面向下移动!

怎么做？

/*******************page layout**************************/

.container {
  width: 100%;
  background-color: #d5d5d5;
  display: flex;
  align-items: flex-start;
}

.sidebarcontainer {
  width: 250PX;
  /*height: 6000px;*/
  display: inline-block;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 2px;
}

.innersidebarcontainer {
  position: relative;
  width: 100%;
  height: 100%;
}

.sidebar {
  width: 243px;
  background-color: white;
  height: 500px;
  /*top: 1px;*/
  /*bottom: 0;*/
  /*position: absolute;*/
}

.mainpage {
  width: calc(100% - 250px);
  padding: 5px;
  padding-left: 2px;
  height: 600px;
  display: inline-block;
  box-sizing: border-box;
}

.page {
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  align-content: flex-start;
}

.footer {
  height: 500px;
  width: 100%;
  margin: 0 auto;
  background-color: #031003;
}


/***************end of pagelayout******************/

.card {
  width: 250px;
  /*height: 400px;*/
  align-self: flex-start;
  margin: 10px;
  display: inline-block;
}

.image {
  width: 200px;
  margin: 0 auto;
  height: 250px;
}

.image img {
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="sidebarcontainer">
    <div class="innersidebarcontainer">
      <div class="sidebar">
      </div>
    </div>
  </div>
  <!--
    -->
  <div class="mainpage">
    <div class="page">
      <h1>page</h1>
    </div>
  </div>
</div>
<div class="footer"></div>

Answer 1

flex 容器的初始设置是align-items: stretch。这意味着 flex 元素将扩展以覆盖横轴的长度。

在 flex-direction: row 的 flex 容器中，横轴是高度。

所以如果你想让你的侧边栏占据父级的高度，首先移除align-items: flex-start。这会覆盖默认的 stretch 值。

.container {
  width: 100%;
  background-color: #d5d5d5;
  display: flex;
  /* align-items: flex-start; */
}

其次，因为您有嵌套元素，所以将 flex 元素放入 flex 容器中，这样子项也可以获得 align-items: stretch。并删除所有 height 值，因为它们还会覆盖 stretch 默认值。

最后，如果您不希望所有列具有相同的高度——也许您希望一列具有内容高度——您可以在单个元素上使用 align-self: flex-start，这覆盖来自父级的 align-items: stretch。有关详细信息，请参见此处:How to disable equal height columns in Flexbox?

revised demo

/*******************page layout**************************/

.container {
  width: 100%;
  background-color: #d5d5d5;
  display: flex;
  /* align-items: flex-start;  */
}

.sidebarcontainer {
  width: 250PX;
  /*height: 6000px;*/
  display: inline-block;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 2px;
}

.innersidebarcontainer {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;  /* NEW */
}

.sidebar {
  width: 243px;
  background-color: white;
  /* height: 500px; */
  /*top: 1px;*/
  /*bottom: 0;*/
  /*position: absolute;*/
}

.mainpage {
  width: calc(100% - 250px);
  padding: 5px;
  padding-left: 2px;
  height: 600px;
  display: inline-block;
  box-sizing: border-box;
}

.page {
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  align-content: flex-start;
}

.footer {
  height: 500px;
  width: 100%;
  margin: 0 auto;
  background-color: #031003;
}


/***************end of pagelayout******************/

.card {
  width: 250px;
  /*height: 400px;*/
  align-self: flex-start;
  margin: 10px;
  display: inline-block;
}

.image {
  width: 200px;
  margin: 0 auto;
  height: 250px;
}

.image img {
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="sidebarcontainer">
    <div class="innersidebarcontainer">
      <div class="sidebar">
      </div>
    </div>
  </div>
  <!--
    -->
  <div class="mainpage">
    <div class="page">
      <h1>page</h1>
    </div>
  </div>
</div>
<div class="footer"></div>