Question

我正在尝试将蓝色flex-item的内容高度设置为蓝色flex-item的高度。

需要设置高度，滚动条才能工作。如何将高度设置为与蓝色flex-item相同？

我希望红色flex-item的高度为页面的100％。我可以得到的结果最接近的结果是将红色flex-item中的div高度设置为100vh。

当蓝色flex-item中的内容少于红色flex-item时，我会得到所需的结果，但是当蓝色flex-item中的内容较大时，就会出现问题。

最明显的答案似乎是设置父类容器的高度，但它必须为100％，以便蓝色flex-item可以增长。

.container {
  display: flex;
  border: 1px solid gray;
}

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

.menu-content {
  width: 200px;
  height: 100vh;
  overflow-y: auto;
}

.content {
  border: 1px solid blue;
  align-self: flex-start;
  height: 100%;
  overflow: hidden;
}

https://jsfiddle.net/mattdtomo/zqsxwn59/

Answer 1

您可以考虑在菜单元素上使用min-height:100vh，以确保它可以覆盖屏幕高度并且可以随着蓝色内容而增长。然后使用height:0;min-height:100%;作为其内容，以使其适合而不会溢出：

.container {
  display: flex;
}

.menu {
  border: 1px solid red;
  min-height: 100vh;
  width: 200px;
}

.menu-content {
  overflow-y: auto;
  height:0;
  min-height:100%;
}

.content {
  border: 1px solid blue;
  align-self: flex-start;
}

body {
  margin:0;
}
* {
  box-sizing:border-box;
}

<div class="container">
  <div class="menu">
    <div class="menu-content">
      Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu ContentMenu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu ContentMenu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content 
    </div>
  </div>
  <div class="content">
  Stretch Content Stretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch Content ch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch Contentch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch Content ch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch Content
  </div>
</div>

如何将flex-item的高度设置为与兄弟姐妹相同的高度

1 个答案: