色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何在CSS網(wǎng)格布局中啟用溢出內(nèi)容的滾動？

CSS
謝彥文2年前10瀏覽0評論

你好StackOverflow社區(qū)， 我目前正在做一個HTML/ CSS項目，其中我有一個3列網(wǎng)格布局。左欄包含一個類似終端的界面，帶有一個輸出區(qū)和一個輸入?yún)^(qū)。輸出rea()包含的文本段落經(jīng)常超出可用的垂直空間。

下面是我的代碼的簡化版本:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>WebSocket Game Client</title>

</head>

<style>
  html,
  body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
  }
  
  .three-columns {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  
  .split {
    height: 100%;
    width: 100%;
  }
  
  .horizontal-gutter {
    height: 100%;
    width: 20px;
    background-color: black;
  }
  
  .terminal {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    background-color: rgb(46, 46, 46);
    font-family: "Roboto Mono", monospace;
    font-size: 16px;
    overflow: hidden;
  }
  
  .output-buffer {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    color: white;
  }
  
  .input-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    background-color: rgb(69, 64, 64);
    padding: 5px;
  }
  
  .command-input {
    height: 100%;
    width: 100%;
    background-color: rgb(69, 64, 64);
    border: none;
    color: white;
    font-family: "Roboto Mono", monospace;
    font-size: 16px;
  }
</style>

<body>
  <div id="main" class="three-columns">
    <div id="split-1" class="split">
      <div class="terminal">
        <div id="output" class="output-buffer">
          <p>This is an output buffer that is expected to have scrollbars on this div when the content exceeds its size. Instead it expands.