当包装材料由于包装内容而膨胀时，侧边栏的高度不会填满

Question

我试图让侧边栏成为容器的整个高度。 这是问题的草图： 侧边栏居中，但只要行中的项目包装（使用弹性框），侧边栏就不会在我当前的解决方案中随之缩放..

HTML的简单版本看起来像这样：

<div class="wrapper">
   <div class="sidebar">
   </div>
   <div class="row">
       <div class="item">
       </div>
       <div class="item">
       </div>
       <div class="item">
       </div>
   </div>
</div>
<!-- This can be repeated multiple times -->

我目前使用的scss如下：

.wrapper {
   display: flex;
   flex-direction: row;
   align-items: center;

   .sidebar {
       height: 100%;
       background-color: blue;
   }

   .row {
       display: flex;
       flex-direction: row;
       align-items: center;
       width: 100%;
       flex-wrap: wrap;

       .item {
          margin: 50px;
          width: 200px;
          height: 200px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
       }
   }
}

知道如何解决这个问题？

Answer 1

在align-self: stretch上使用.sidebar。

您已从容器中应用align-items: center。这是所有弹性项目的中心。

您可以对单个项目使用align-self来覆盖来自父级的align-items。

Answer 2

这是我将如何做到的：

＆＃13;

＆＃13;

.wrapper {
   display: flex;
   flex-direction: row;
}

.sidebar {
  background-color: blue;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 150px; // simple sizing
}

.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  background-color: lightblue;
  flex: 1 1 100%;
}

.item {
  margin: 50px;
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: red;
}

＆＃13;

<div class="wrapper">
   <div class="sidebar">
     <div>sidebar stuff</div>
   </div>
   <div class="row">
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;