简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Wie erstelle ich einen Flex-Container, der vertikales Scrollen ermöglicht, ohne seine Höhe anzugeben?
P粉286046715
P粉286046715 2023-09-11 13:07:33
0
1
457

Im folgenden Codeausschnitt erwarte ich, dass der erste und der zweite Container jeweils 50 % der Fensterhöhe einnehmen, und ich möchte, dass der erste Containerkörper einen vertikalen Überlauf aufweist.

Wenn ich den großen Teil in den ersten Container lege, wird er leider größer als 50 % der Seite und der automatische Überlauf funktioniert nicht.

Gibt es eine Möglichkeit, die Höhe nicht anzugeben? 

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

.root {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.first-block,
.second-block {
  flex: 1;
  background-color: aqua;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
}

.first-block-header {
  height: 100px;
  background-color: yellow;
}

.first-block-footer {
  height: 100px;
  background-color: coral;
}

.first-block-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.first-block-content {
  height: 700px;
  width: 50px;
  background-color: purple;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Problem with overflow</title>
</head>

<body>
  <div class="root">
    <div class="first-block">
      <div class="first-block-header"></div>

      <div class="first-block-body">
        <div class="first-block-content"></div>
      </div>

      <div class="first-block-footer"></div>
    </div>

    <div class="second-block">

    </div>
  </div>
</body>

</html>

P粉286046715
P粉286046715

Antworte allen(1)
P粉391677921
P粉3916779212023-09-12 10:14:45 1 Etage

您必须将块内容包装在 div 中，并将溢出-y 设置为滚动，以便标记整个块内容滚动，否则只有中间部分会滚动。

并将 overflow-y: auto; 添加到块本身以将其设置为滚动。

试试这个：

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

.root {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.block-content-wrapper {
  overflow-y: scroll;
}

.first-block,
.second-block {
  flex: 1;
  background-color: aqua;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.first-block-header {
  height: 100px;
  background-color: yellow;
}

.first-block-footer {
  height: 100px;
  background-color: coral;
}

.first-block-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.first-block-content {
  height: 700px;
  width: 50px;
  background-color: purple;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Problem with overflow</title>
</head>

<body>
  <div class="root">
    
    <div class="first-block">
    <div class="block-contant-wrapper">
      <div class="first-block-header"></div>

      <div class="first-block-body">
        <div class="first-block-content"></div>
      </div>

      <div class="first-block-footer"></div>
    </div>
      </div>

    <div class="second-block">

    </div>
  </div>
</body>

</html>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！