Question

如果一般内容长于模态高度，我有一个带有滚动的模态。但是我需要在我的模态中使用div并使用自己的滚动条。我的问题是我不知道我的模态的高度，因为它基于30vh。

如果我可以为内部div设置一个静态高度，那会更容易，但我不能。

我的问题：我需要为正确的区域创建一个单独的滚动。

＆＃13;

.container {
  max-height: 30vh;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: auto;
}

.header {
  border: 1px solid red;
}

.body {
  display: flex;
}

.leftArea {
  border: 1px solid green;
  width: 50%;
}

.rightArea {
  border: 1px solid blue;
  width: 50%;
  overflow-x: hidden;
  overflow-y: auto;
  /* height: ???; */
}

＆＃13;

<div class="container">
  <div class="header">
    HEADER
  </div>
  <div class="body">
    <div class="leftArea">
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
    </div>
    <div class="rightArea">
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
    </div>
  </div>
</div>

＆＃13;

以下是CodePen上的示例。

Answer 1

在块布局中，您需要固定的高度才能使overflow属性生效。

从MDN上的陈述中可以清楚地看到：

要使overflow生效，块级容器的设置高度（height或max-height）或white-space必须设置为{{ 1}}。

但是，在 flex layout 中，这不是一个问题。可以在具有动态高度的容器上触发溢出条件。

因此，将主容器从 display：block （默认）切换到 display：flex 。

nowrap

.container {
  max-height: 30vh;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: auto;
  /* new */ display: flex;
  /* new */ flex-direction: column;
}

.header {
  border: 1px solid red;
}

.body {
  display: flex;
  /* new */ min-height: 0; /* see note below */
}

.leftArea {
  border: 1px solid green;
  width: 50%;
}

.rightArea {
  border: 1px solid blue;
  width: 50%;
  overflow: auto;
}

jsFiddle demo

注意：您需要覆盖此布局的<div class="container"> <div class="header">HEADER</div> <div class="body"> <div class="leftArea"> left area left area left area left area left area left area left area left area left area </div> <div class="rightArea"> right area right area right area right area right area right area right area right area right area right area right area right area right area right area right area right area right area right area </div> </div> </div>默认值才能在大多数浏览器上运行。这里解释了这个问题：Why don't flex items shrink past content size?

Answer 2

你没有得到正确的答案。

但这就是你要求的吗？

＆＃13;

.container {
  max-height: 70vh;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.header {
  border: 1px solid red;
}

.body {
  display: flex;
  flex-size: 1;
}

.leftArea {
  border: 1px solid green;
  width: 50%;
}

.rightArea {
  border: 1px solid blue;
  width: 50%;
  overflow-x: hidden;
  overflow-y: auto;
  /* height: ???; */
}

＆＃13;

<div class="container">
  <div class="header">
    HEADER
  </div>
  <div class="body">
    <div class="leftArea">
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
    </div>
    <div class="rightArea">
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
    </div>
  </div>
</div>

＆＃13;

如何使用滚动条将滚动条添加到元素内的元素？

2 个答案:

jsFiddle demo