子divに垂直スクロールバーが表示されない

Question

スクロールバーをボックスコンテンツdivに表示することができません。 'overflow-y：auto'を追加しても機能しません。

私の要件：

• 全体のレイアウトは、ブラウザの高さに調整する必要があります。だから私は が#wrap {...身長：50vh; ...}
• スクロールバーには、ヘッダー を含めないでください。これは、ボックスコンテンツのdivにのみ適用する必要があります。ヘッダーの高さをコンテンツに合わせ、必要に応じてラップします。 https://jsfiddle.net/mjvancouver905/5vswprfw/

  ありがとう：

はここでここでバイオリンへのリンクのCSS

#wrap { 
     margin: 10px; 
     height: 50vh; 
     border: 2px solid black; 
    } 

    .container { 
     border: 4px solid red; 
     padding: 4px 3px; 
     margin: 0; 
     max-height: 90%;  /* As a percentage of the parent. */ 
     /* height: 300px;  /* This causes the scroll bar to appear, but its not what I want. */ 
    } 

    .box-header { 
     background-color: green; 
     padding: 5px 10px; 
     color: white; 
    } 

    .box-content { 
     border: 3px solid blue; 
     overflow:auto; 
     padding: 5px; 
     padding-top: 10px; 
     max-height:100%; 
    } 

そしてHTML

<div id="wrap"> 
    <div class="container"> 
     <div class="box-header"> Header String</div> 
     <div class="box-content"> 
      <p>line 1</p> 
      <p>line 2</p> 
      <p>line 3</p> 
      <p>line 4</p> 
      <p>line 5</p> 
      <p>line 6</p> 
      <p>line 7</p> 
      <p>line 8</p> 
      <p>line 9</p> 
      <p>line 10</p> 
      <p>line 11</p> 
      <p>line 12</p> 
      <p>line 13</p> 
      <p>line 14</p> 
      <p>line 15</p>   
      <p>line 16</p> 
      <p>line 17</p> 
      <p>line 18</p> 
      <p>line 19</p>   
     </div> 
    </div> 
</div> 

です。

Answer 1

あなたはflexレイアウト

#wrap { 
 
    margin: 10px; 
 
    border: 2px solid black; 
 
} 
 

 
.container { 
 
    padding: 4px 3px; 
 
    margin: 0; 
 
    height: 50vh; 
 
    /* As a percentage of the parent. */ 
 
    /* height: 300px; \t \t \t \t /* This causes the scroll bar to appear, but can't be used because the height must adjust to the size of the screen. */ 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.box-header { 
 
    background-color: green; 
 
    padding: 5px 10px; 
 
    color: white; 
 
} 
 

 
.box-content { 
 
    border: 3px solid blue; 
 
    padding: 5px; 
 
    padding-top: 10px; 
 
    overflow-y: scroll; 
 
}

<div id="wrap"> 
 
    <div class="container" style="border: 4px solid red"> 
 
    <div class="box-header"> Header in the B1 div.</div> 
 
    <div class="box-content"> 
 
     <p>line 1</p> 
 
     <p>line 2</p> 
 
     <p>line 3</p> 
 
     <p>line 4</p> 
 
     <p>line 5</p> 
 
     <p>line 6</p> 
 
     <p>line 7</p> 
 
     <p>line 8</p> 
 
     <p>line 9</p> 
 
     <p>line 10</p> 
 
     <p>line 11</p> 
 
     <p>line 12</p> 
 
     <p>line 13</p> 
 
     <p>line 14</p> 
 
     <p>line 15</p> 
 
     <p>line 16</p> 
 
     <p>line 17</p> 
 
     <p>line 18</p> 
 
     <p>line 19</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

あなたは適切な（固定MAX-heigth）を追加する必要があります。例：

.box-content { 
    border: 3px solid blue; 
    overflow: auto; 
    padding: 5px; 
    padding-top: 10px; 
    max-height: 400px; 
} 

https://jsfiddle.net/motka53y/

Answer 3

私は、このようにそれを行うだろう。まず、オーバーフローを隠すことができるように、コンテナの幅を固定する必要があります。最大高さを90％から90％に変更する必要があります。オーバーフロー隠しプロパティを追加して、コンテナの外にオーバーフローした部分が隠されるようにする必要があります。ここで

は作業フィドルです：https://jsfiddle.net/5vswprfw/12/

は、これは私がCSSスタイルに変更するものである：

.container { 
    padding: 4px 3px; 
    margin: 0; 
    height: 90%; 
    overflow:hidden; 
    }