web-dev-qa-db-ja.com

column-countを使用すると、オーバーフローしたコンテンツが最初の列を除いてすべて完全に消えます。なぜですか？

ラッパーでcolumn-countを使用し、ラッパーのコンテナーにborder-radiusが適用され、コンテナーのコンテンツがオーバーフローしている場合、最初の列を除くすべての列でコンテンツが完全に消えます。

これが私の例です： https://jsfiddle.net/f4nd7tta/
赤い半円は最初の列にのみ表示されます。なぜですか？

#main_wrap{
    width:100%;
    border:solid 1px black;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
#main_wrap > div{
    border-radius:5px;
    overflow:hidden;
    position:relative;
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
    width:70%;
    height:300px;
    border:solid 2px grey;
    margin:2px;
}
#main_wrap > div > div{
    position:absolute;
    background:red;
    border-radius:40px;
    width:40px;
    height:40px;
    right:-20px;
    top:0;
}
<div id="main_wrap">
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
</div>
csscss-multicolumn-layoutcolumn-count
26
Eduárdó

私は正直にこれがなぜ起こるかわからない、私は彼らがこの動作を指定している場合はドキュメントを探しています。その意図的なものかバグかを確認したいと思います。今のところ私は使っています

_-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
_

そして、それは機能します...したがって、上記のプロパティを_#main_wrap > div_に追加します。ベンダーのプレフィックスを除外する場合は、transform: translateX(0);で十分だと思います。

デモ

わかりました、それはバグだと思います：

問題84030：CSS 3列のバグ（オーバーフロー：機能のように非表示にする必要がある場所に非表示）

絶対位置に配置された要素は、あたかもオーバーフローがあるかのように切り取られます。ボックスに非表示が適用されます。ただし、オーバーフローの適用：表示またはその他のルールは問題を解決しません

私はこれについてさらに考えました、私がランダムにプロパティを挿入してそれが機能した最初の解決策を提案したので、clipプロパティを使用してあなたがやっていることを合法的に行うことができる方法もありますもう_overflow: hidden;_が必要です。

_#main_wrap > div > div{
    position:absolute;
    background:red;
    border-radius:40px;
    width:40px;
    height:40px;
    right:-20px;
    top:0;
    clip: rect(0px,20px,40px,0px);
}
_

デモ2（クリップデモ）

16
Mr. Alien

私はこの問題を調査するのにかなりの時間を費やし、CSSプロパティwill-change: transform;を列レイアウト内のアイテムに追加する提案を見つけました。例えば：

<div class="container">
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
</div>

<style>
  .container {
    columns: auto 5;
    column-gap: 0;
    margin: -16px;
  }

  .items {
    break-inside: avoid;
    padding: 16px;
    page-break-inside: avoid;
    will-change: transform;
  }
</style>
5
Benjamin Humphrey

[〜＃〜] answer [〜＃〜] の実際の例を見つけてください。FirefoxとChromeでテストしました。

CODE HTML
<!--you can add as many divs as you like it will work -->
<div id="main_wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CODE CSS
#main_wrap{
  width:100%;
}

#main_wrap > div{
  width:20%; #***
  height:250px; #***
  background:whitesmoke;
  float:left;
  position:relative;
  overflow:hidden;
  border-radius:5px;
  border:2px solid gray;
  margin-left: 10.75%; #***
  margin-bottom:1rem; #***
}

#main_wrap > div:after{
  content:"";
  position:absolute;
  width:40px;
  height:40px;
  background:red;
  border-radius:50%;
  right:-20px;
}

例に示したレイアウトを再作成しましたが、最終的なレイアウトを取得するためにいくつかの変更が必要になる場合があります。これは、marked（＃***）プロパティで遊ぶためです。

0
T04435