CSS设置了高度和宽度，但在flexbox中调整了div的大小

时间：2019-07-19 01:14:17

标签： html css flexbox

我正在尝试创建一个模式对话框，该对话框会自动调整大小并溢出内部内容。但是，模态内容不断溢出容器，并且不会显示滚动条。这是因为容器高度已明确设置，但我希望内部内容将其拉伸到最大尺寸。我不知道有什么技巧可以使其正常工作。

我最初想出的是：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>

        window.onload = function () {
            var contentString = 'ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ';
            window.el = document.getElementById('content')
            function toggleContent() {
                if (el.innerText == "") el.innerText = contentString;
                else el.innerText = "";
            }
            window.toggleContent = toggleContent;
            el.innerText = contentString;
        }

    </script>
    <style>
    * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #fixed {
            position: fixed;
            top: 12px;
            right: 24px;
            transform: scale(2.0);
        }

        .overlay {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            align-content: center;
            background-color: gray;
        }

        section {
            background-color: white;
            border: 3px solid red;
            display: flex;
            flex-direction: column;
            width: 36em;
            height: 24em;
            max-width: 95vw;
            max-height: 95vh;
        }

        p {
            border: 3px solid green;
            word-break: break-all;
        }

        header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            align-content: center;
        }
    </style>
</head>

<body>
    <div class="overlay">
        <section>
            <header>
                <span>Header</span>
                <span>
                    X
                </span>
            </header>
            <p id="content">Initial Content</p>
            <footer>Footer</footer>
        </section>
    </div>
    <button id="fixed" onclick="toggleContent()">Toggle</button>
</body>

</html>

在所有四种情况下（无内容，完整内容，大小）的外观示例

window.onload = function() {
  var contentString = 'ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent';
  window.el = document.getElementsByClassName('filled');

  function toggleContent() {
    Array.prototype.forEach.call(el, f => {
      if (f.innerText == "Content") f.innerText = contentString;
      else f.innerText = "Content";
    })
  }
  window.toggleContent = toggleContent;
  toggleContent();
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: flex-start;
}

#fixed {
  position: fixed;
  right: 0px;
  top: 0px;
}

.panel {
  display: inline-block;
  overflow: hidden;
  border: 2px solid black;
}

.panel.one,
.panel.two {
  width: 50%;
  height: 400px;
}

.panel.three,
.panel.four {
  width: 14%;
  height: 400px;
}

article {
  /* overlay */
  background-color: gray;
}

section {
  /* modal window */
  border: 3px solid red;
  background-color: white;
}

p {
  /* content */
  border: 3px solid green;
  word-break: break-all;
}

article {
  /* overlay, all behave the same pretty much */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.one section {
  /* modal window */
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 50%;
  max-width: 80%;
  max-height: 80%;
}

.one p {
  /* content */
  border: 3px solid green;
}

.three section {
  display: flex;
  flex-direction: column;
  width: 90%;
  height: 40%;
}

.two section {
  display: flex;
  flex-direction: column;
  max-height: 95%;
  max-width: 95%;
}

.two p {
  max-height: 95%;
  overflow-y: auto;
}

.four section {
  display: flex;
  flex-direction: column;
  max-height: 95%;
  max-width: 88%;
}

.four p {
  overflow-y: auto;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="panel one">
    <article>
      <!-- overlay -->
      <section>
        <!-- modal window -->
        <p>Content</p>
        <!-- body content -->
      </section>
    </article>
  </div>
  <div class="panel two">
    <article>
      <section>
        <p class="filled">Content</p>
      </section>
    </article>
  </div>
  <div class="panel three">
    <article>
      <section>
        <p>Content</p>
      </section>
    </article>
  </div>
  <div class="panel four">
    <article>
      <section>
        <p class="filled">Content</p>
      </section>
    </article>
  </div>
  <button id="fixed" onclick="toggleContent()">Toggle</button>
</body>

</html>

摘要

有没有办法用纯HTML / CSS做我想做的事情？我无法找到一种方法来克服max-height: 100%仅遵守height

的明确定义这一事实。

1 个答案:

答案 0 :(得分：1)

我认为您需要做的只是转到第二个示例broken & overflow-y-scroll，然后将height属性更改为min-height。这就是您想要的效果吗？

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

        #fixed {
            position: fixed;
            top: 0px;
            right: 0px;
            transform: scale(2.0) translate(-0.5)
        }

        .overlay {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            align-content: center;
            background-color: gray;
        }

        section {
            background-color: white;
            border: 3px solid red;
            display: flex;
            flex-direction: column;
            min-width: 36em;
            min-height: 24em;
            max-width: 95vw;
            max-height: 95vh;
        }

        p {
            border: 3px solid green;
            word-break: break-all;
            overflow-y: auto;
        }

        header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            align-content: center;
        }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>

        window.onload = function () {
            var contentString = 'ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent ';
            window.el = document.getElementById('content')
            function toggleContent() {
                if (el.innerText == "") el.innerText = contentString;
                else el.innerText = "";
            }
            window.toggleContent = toggleContent;
            el.innerText = contentString;
        }

    </script>
</head>

<body>
    <div class="overlay">
        <section>
            <header>
                <span>Header</span>
                <span>
                    X
                </span>
            </header>
            <p id="content">Initial Content</p>
            <footer>Footer</footer>
        </section>
    </div>
    <button id="fixed" onclick="toggleContent()">Toggle</button>
</body>

</html>

相关问题
最新问题