Question

我有一个可以简化的内容:

* {
  margin: 0;
}

.container {
  height: 400px;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%
}

.top {
  height: 48px;
  background-color: blue;
}

.bottom {
  flex: 1;
  display: flex;
  overflow-y: scroll;
}

.main {
  display: flex;
  flex: 1;
  background: green;
  position: relative;
  align-items: stretch;
}

.sidebar {
  width: 100px;
  background-color: yellow;
  border: 1px solid orange;
  min-height: 100%;
}

.sidebar-item {
  height: 300px;
  border: 1px solid purple;
}

.flex-item {
  flex: 1;
  border: 1px solid red;
}

<div class="container">
  <div class="content">
    <div class="top"></div>
    <div class="bottom">
      <div class="sidebar">
        <div class="sidebar-item"></div>
        <div class="sidebar-item"></div>
        <div class="sidebar-item"></div>
      </div>
      <div class="main">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
      </div>
    </div>
  </div>
</div>

问题是,旁边bar被拖拉,而弹性物品的高度是超量部分,而不是超出部分。

如何确定这一点?

我尝试使用<代码>align-items: limit/code>,但未作任何改动。我也试图把身高到不同的因素,但没有工作。

Answer 1

您可将<代码>.bottom改为网布,并指定<代码>-auto-rows: min-content。这样,集装箱内容的高度取决于其内容,而不是集装箱本身:

.bottom {
  flex: 1;
  display: grid;
  overflow-y: scroll;
  grid-auto-flow: column;
  grid-template-columns: auto;
  grid-auto-rows: min-content;
  grid-auto-columns: 1fr;
}

* {
  margin: 0;
}

.container {
  height: 400px;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%
}

.top {
  height: 48px;
  background-color: blue;
}

.bottom {
  flex: 1;
  display: grid;
  overflow-y: scroll;
  grid-auto-flow: column;
  grid-template-columns: auto;
  grid-auto-rows: min-content;
  grid-auto-columns: 1fr;
}

.main {
  display: flex;
  flex: 1;
  background: green;
  position: relative;
  align-items: stretch;
}

.sidebar {
  width: 100px;
  background-color: yellow;
  border: 1px solid orange;
  min-height: 100%;
}

.sidebar-item {
  height: 300px;
  border: 1px solid purple;
}

.flex-item {
  flex: 1;
  border: 1px solid red;
}

<div class="container">
  <div class="content">
    <div class="top"></div>
    <div class="bottom">
      <div class="sidebar">
        <div class="sidebar-item"></div>
        <div class="sidebar-item"></div>
        <div class="sidebar-item"></div>
      </div>
      <div class="main">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
      </div>
    </div>
  </div>
</div>

友情链接