card-columns card over-flow content is not visible

[raghuam]

v4-alpha .card-columns .card (over-flow content is not visible) i want show more details content in position absolute element inside card, but its visible out side the card?

[cvrebert]

Please post a JS Bin or other live example that demonstrates the problem.
We can't debug screenshots.

[raghuam]

Hi,

here is the basic bootstrap cards, JS Bin link http://jsbin.com/solozuyofe/1/edit?html,css,output

basically ".absolute-content" div going below the other cards, i wonder position:absolute; why its not working in .card-columns .cards...

[cvrebert]

@raghuam What browser and OS are you using?
In OS X Chrome, the red boxes aren't below the cards, they just exceed the width of the card and their text gets cut off. If I remove the width: 600px; style from your example, the red boxes get displayed in a reasonable way (fit to the bounds of the card; text line-wraps properly).

[raghuam]

@cvrebert Im checking in windows 8 chrome and Mozilla Firefox.
the red box position absolute i want to show bigger than card size, when we have position absolute that can be overlap with parent relative container ? but in this cards its showing only inside the card, i want t show content bigger than card size, please check and let me know how i can fix this issue....

[cvrebert]

Reduced testcase: http://jsbin.com/yovihuf/1/edit?html,css,output
Chrome, Safari, and Edge 13 all clip the position:absolute child at the middle of the column gap.
Firefox doesn't clip it, but draws the 2nd and 3rd columns on top of it (with regard to the z-axis).

[raghuam]

Is there any fix can be done ?

[cvrebert]

Filed Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1282363

[cvrebert]

Is there any fix can be done ?

Assuming you mean "Then how do I make my position:absolute element get displayed wider than the boundaries of its column?", it's unclear whether it's possible to accomplish that using CSS3 Multi-column Layout.

Unfortunately, we don't really answer "how-to" questions on this issue tracker. For further assistance with this, try asking the community on StackOverflow, IRC, or Slack. See https://github.com/twbs/bootstrap/blob/v4-dev/README.md#community for links.
Good luck.

[raghuam]

@cvrebert its bug with cards columns? position:absolute element get displayed wider than the boundaries of its card.

[cvrebert]

The bug lies in the web browser(s), as opposed to Bootstrap. .card-columns is implemented using CSS Multi-column Layout Module Level 1. Specifically:

@media (min-width: 544px) {
  .card-columns {
    -moz-column-count: 3;
    column-count: 3;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
  }
}

All major browsers except Firefox currently clip your .absolute-content to the boundaries of the column it's within. It's not clear to me whether Firefox or Chrome/Safari/Edge is correct according to the standard here.

[cvrebert]

Added to the Wall of Browser Bugs in #20183.