时间戳

首页 > 解决方案 > 子容器仍然在父 100vh 之外

html - 子容器仍然在父 100vh 之外

问题描述

这有点像两个问题。

我有一个height: 100vh类似于我的例子在 jsFiddle 中的身体（除了在那里我放了 20vh.

我有一个与此类似的结构，其中 innerRight 容器与其他内容相比可能非常大，只有该容器才能获得它自己的滚动条。我在我的主要项目中得到了这个工作，但是外部容器（类似于我在示例中显示的外部）仍然扩展超过父母高度容器main。无论是 100vh 还是 20vh 都没有关系，它不会停留在display:flex.

.main {
  height: 20vh;
}

.outer {
  display: flex;
  overflow: hidden;
}

.innerLeft {
  height: 200px;
  width: 50px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: green;
}

.innerRight {
  overflow: auto;
  height: 500px;
  background-color: red;
  width: 100%;
}
<div class="main">
  <div class="header">
    some random text
  </div>
  <div class="outer">
    <div class="innerLeft">
    </div>
    <div class="innerRight">
    </div>
  </div>
</div>

标签： htmlcss

解决方案

你能检查下面的代码吗？希望它对你有用。

  1. 您必须设置height:100vh;并.main 设置width:calc(100% - 50px)；到.innerRight.
  2. 从innerleft和innerright元素中删除高度。

请参考此链接：https ://jsfiddle.net/yudizsolutions/9Lsyzg64/1/

body {
  margin: 0;
}

.main {
  height: 100vh;

}

.outer {
  display: flex;
  height: calc(100vh - 19px);
  overflow: hidden;
}

.innerLeft {
  width: 50px;
  background-color: green;
}

.innerRight {
  overflow: auto;
  background-color: red;
  width: calc(100% - 50px);
}
<div class="main">
  <div class="header">
    some random text
  </div>
  <div class="outer">
    <div class="innerLeft">
    </div>
    <div class="innerRight">
    </div>
  </div>
</div>

推荐阅读