水平プレ/コードスクロールとのFlexboxの互換性

Question

私は水平方向にスクロールしたいブートストラップコンテナにとcodeというタグをいくつか入れています。これは通常、スッキリフッターを実現するために私のページのbodyにflexboxを追加するまで正常に動作します。この後、codeは、ページが狭い場合（モバイル閲覧の場合など）、水平方向にスクロールしなくなりました。

ここで（ウィンドウを狭めるようcode水平スクロールバーが消えることに注意してください）私のコードです：

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    min-height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
code { 
 
    max-height: 200px; 
 
    background-color: #eeeeee; 
 
    word-break: normal !important; 
 
    word-wrap: normal !important; 
 
    white-space: pre !important; 
 
} 
 
.flexer { 
 
    flex: 1; 
 
} 
 
footer { 
 
    background-color: #CCC; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12 docs"> 
 
      <p>Some sample code</p> 
 
      <pre><code>Loading mirror speeds from cached hostfilebase: mirrors.arpnetworks.com * centosplus: mirrors.arpnetworks.com* extras:mirrors.arpnetworks.com*rpmforge: mirror.hmc.eduupdates: mirrors.arpnetworks.comExcluding Packages in global exclude list</code></pre> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="flexer"></div> 
 
<footer> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-sm-12 text-center"> 
 
      footer 
 
      </div> 
 
     </div> 
 
    </div> 
 
</footer>

http://jsfiddle.net/nturor46/1/

粘着性のためのフレキシボックスを使用するには、どのように任意のアイデアは、スクロールしながらフッターを維持するpre/code？

Answer 1

シンプル

.container { width:100%; } 

は正しくウェブサイトのサイズを変更します。しかし、Chromeでは実際にはスクロールバーを使用できません。これは、BODY以外のすべてのコンテナのサイズがオーバーフローしたために発生します。 したがって、我々は正しく前のノードを認識するようにブラウザに指示奨め：

.container { 
    max-width: 100%; 
} 
pre { 
    position: relative; 
} 

これは正しく、再びマウスイベントを処理するためにChromeを告げるとレイアウト

を修正pre -nodeのマージン下の点に注意してください。あなたのレイアウトが奇妙に見えるオーバーフロー - 国で失われます。 max-widthは、それがブートストラップで作られた固定幅ステートメントを上書きしないことを確認するために、最終的なバージョンで使用された

PS：現在のChromeでテストし、Firefoxのhttp://jsfiddle.net/nturor46/32/

Answer 2

以下のように、prevタグとその内容をdivで囲みます。

<div class="code">{your code goes here}</div> 

CSS：

.code{ 
    width:92vw; /*you can change this in media query to specific device width for better results*/ 
    overflow-x:auto; 
} 

Working jsfiddle link

Answer 3

ここで何が起こるには、Chromeの最も確実バグです。

あなたのフィドルで遊んだ後、他のブラウザで見ると、これはChrome固有の問題だと判断できます。そして興味深いもの。

何らかの理由で、<div class="col-md-12 docs">は、それが（pと一緒にpreの高さ）が必要ですが、preタグ内に水平スクロールバーを考慮していない大きさに成長します。

ここに問題を示す画像があります。赤い背景の部分がコンテナです。

preが一番下に広い1ピクセルの境界線を持っているので、結果はあなたが実際にスクロールバーを使用するための1pxのギャップを残します。あなたはそれを自分で試すことができます。スクロールバーの一番上の1px行を取得しようとします。

flexプロパティを削除しても問題は解決しますが、これは受け付けません。

ここでは、親の一番下に0.1pxのパディングを追加すると問題が解決すると思っていたが、そうはならなかった。私はその後、クラスchromefixとdivにpreタグをラップしようとしたし、次のCSS

.chromefix{ 
    overflow: hidden; 
} 

を追加しましたしかし、それはコンテナが約50％をスクロールバーで育ったにも奇妙な状況を作成し

私は2つを組み合わせてみましたが、違いはありませんでした。

ここから、preタグとそのプロパティを調べ始めました。 Bootstrapのデフォルトではoverflow: autoです。だから私が試みたのは、追加することだった

pre{ 
    overflow-x: scroll !important; 
} 

そして、出来た！

だから、overflow-x: scroll !imporantをpreに追加すればいいですよ！ここには​​があります。

希望します。

脇の下として。 max-height: 200pxをpreにも移動したいと思います。 codeに適用しても機能しません。

Answer 4

これらのブートストラップスタイルは、自然なCSSに大きな打撃を与えます。

問題は、columnのフレックスコンテナとブートストラップのルールの間に矛盾があるようです。コンテンツボックスが画面をオーバーフローすると、基本的に水平スクロールバーがpre/codeコンテンツボックスからブラウザウィンドウに移動します。これらの調整で

は、ご希望のレイアウトが動作しているようです：

• 主.containerは（あなたのコードでは、この役割はbody要素によって演奏される）主要フレックスコンテナをDIV
• 移動footer要素作ります下
• オーバーライドブートストラップmargin、paddingにフッターを固執するには、この新しいコンテナ
• 使用flex auto marginsへそしてwidthどこ必要

HTML

<div class="container"> 

    <div class="row"> 
     <div class="col-md-12 docs"> 
      <p>Some sample code</p> 
      <pre><code>Loading mirror speeds from ... cached hostfilebase</code></pre> 
     </div> 
    </div> 

    <footer> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-12 text-center"> 
        footer 
       </div> 
      </div> 
     </div> 
    </footer> 

</div> 

CSS ChromeとFirefoxで動作確認済み

html, body { height: 100%; } 

body > .container { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    width: 100%;      /* override bootstrap styles */ 
    padding: 0;      /* override bootstrap styles */ 
} 

body > .container > .row { 
    margin: 0;      /* override bootstrap styles */ 
    display: flex;     /* nested flex container */ 
    justify-content: center;   /* center content box on page */ 
} 

body > .container > .row > .docs { 
    width: 75%;      /* adjust width of the content box here */ 
} 

code { 
    max-height: 200px; 
    background-color: #eeeeee; 
    word-break: normal !important; 
    word-wrap: normal !important; 
    white-space: pre !important; 
} 

footer { 
    margin-top: auto;    /* stick footer to bottom of container */ 
    background-color: #CCC; 
} 

Revised Fiddle

。

Answer 5

問題が<pre>の幅であるように思われます。

画面の幅が768px以下になると、.containerには特定の幅が適用されないため、問題が発生しています。

画面の幅が768pxより大きい場合は、次のクラスからbootstrap.cssが表示されます。

@media (min-width: 1200px) 
.container { 
    width: 1170px; 
} 
@media (min-width: 992px) 
.container { 
    width: 970px; 
} 
@media (min-width: 768px) 
.container { 
    width: 750px; 
} 

幅が768px下回る一度あなたが見ることができます与えられた具体的な幅がないので。

この問題に対処するには、このようなCSSを記述する必要があります。

@media (min-width: 480px) { 
.container { 
     width: calc(100% - 40px); 
    } 
} 

は基本的には、画面の幅が768px下回ると.containerのための幅を指定する必要があります。一度すると、問題が修正されます。