web-dev-qa-db-ja.com

ディスプレイ：オーバーフローすると、Flexは正しいパディングを失いますか？

CSS3フレックスボックスに問題があります。

flexbox要素をoverflowに設定し、子にmin-width値を設定すると、親の正しいパディングが失われますか？これはすべてのサポートで一貫していますブラウザ。

エラーの例を次に示します。コンテナの右にスクロールすると、パディング値を尊重する代わりに、最後の子がコンテナの右端にぶつかっていることがわかります。

.outer {
    display: flex;
    flex-direction: row;
    width: 300px;
    height: 80px;
    border:1px #ccc solid;
    overflow-x: auto;
    padding: 5px;
}
.outer > div {
    flex: 1 1 auto;
    border: 1px #ccc solid;
    text-align: center;
    min-width: 50px;
    margin: 5px;
}
<div class="outer">
    <div>text1</div>
    <div>text2</div>
    <div>text3</div>
    <div>text4</div>
    <div>text5</div>
    <div>text6</div>
    <div>text7</div>
    <div>text8</div>
    <div>text9</div>
    <div>text10</div>
</div>

これがなぜであり、私がそれを修正する方法を知っている人はいますか？ paddingとmarginの値をさまざまな組み合わせでいじりましたが、成功しませんでした。

htmlcsswinjsflexbox
24
Chris Spittles

最後にスクロール可能なパディングを備えた「overflow-x：auto」の両方が必要な場合は、ラッピングの別のレイヤーを追加する必要があります。

このようなもの：

.scroll {
    overflow-x: auto;
    width: 300px;
    border:1px #ccc solid;
}
.outer {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    min-width: 100%;
    height: 80px;
    padding: 5px;
    float: left; /* To size to content, & not be clamped to available width. (Vendor-prefixed intrinsic sizing keywords for "width" should work here, too.) */
}
.outer > div {
    flex: 1 1 auto;
    border: 1px #ccc solid;
    text-align: center;
    min-width: 50px;
    margin: 5px;
}
<div class="scroll">
  <div class="outer">
    <div>text1</div>
    <div>text2</div>
    <div>text3</div>
    <div>text4</div>
    <div>text5</div>
    <div>text6</div>
    <div>text7</div>
    <div>text8</div>
    <div>text9</div>
    <div>text10</div>
  </div>
</div>
26
dholbert

または、疑似要素を使用してマージンを作成することもできます。

.outer::before { content: ' '; min-width: 5px; }
.outer::after { content: ' '; min-width: 5px; }

.outer {
    display: flex;
    flex-direction: row;
    width: 300px;
    height: 80px;
    border:1px #ccc solid;
    overflow-x: auto;
    padding: 5px;
}
.outer::after { content: ' '; min-width: 5px; }
.outer > div {
    flex: 1 1 auto;
    border: 1px #ccc solid;
    text-align: center;
    min-width: 50px;
    margin: 5px;
}
<div class="outer">
    <div>text1</div>
    <div>text2</div>
    <div>text3</div>
    <div>text4</div>
    <div>text5</div>
    <div>text6</div>
    <div>text7</div>
    <div>text8</div>
    <div>text9</div>
    <div>text10</div>
</div>
6
Artur Käpp

ArthurKäppとdholbertの両方のソリューションが機能しています。ただし、メインフレックスボックスで「align-items」（ストレッチを受け入れる）を使用することを選択した場合、再び壊れます。しばらく時間がかかりましたが、最終的には問題なく機能するソリューションを作成しました。

このソリューションは、疑似要素を使用しています。

.outer {
    display: flex;
    flex-direction: row;
    width: 300px;
    height: 80px;
    border:1px #ccc solid;
    overflow-x: auto;
    padding: 5px;
    align-items: center;
    position: relative;
}
.outer > div {
    flex: 1 1 auto;
    border: 1px #ccc solid;
    text-align: center;
    min-width: 50px;
    margin: 5px;
}

.outer > div:last-child::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 10px;
    display: inline-block;
    margin-left: 10px;
}
<div class="outer">
    <div>text1</div>
    <div>text2</div>
    <div>text3</div>
    <div>text4</div>
    <div>text5</div>
    <div>text6</div>
    <div>text7</div>
    <div>text8</div>
    <div>text9</div>
    <div>text10</div>
</div>

場合によっては、psuedo-elementのmargin-left：10pxが機能しないことに注意してください。あなたは権利を使うことができます：-10pxもうまくいくでしょう。

1
BonifatiusK