Bootstrap: card-columns class not rendering properly in Chrome

[pisukes]

Card-Columns does not render properly in Chrome.

The attached code intends to achieve:

• Two column layout for viewport width between 0 and 575px
• Three column layout for viewport width between 576 and 767px
• Four column layout for viewport width between 768 and 1199px
• Six column layout for viewport width greater than 1199px.
  (Refer to the attached file to see the tested code: card-columns.zip)

The uploaded html file renders as expected in Firefox, IE11 and Edge.

The following issues appear when testing in Chrome:
1 Cards truncated across columns with viewport width between 330px and 575px. Note that the right column top card reading "Bottom" and the left column bottom card reading "Top" are truncated (Figure 1.1); in the 575px width view the problem repeats, in addition the right edge of the left column is not adequately rendered as all the borders disappear (Figure 1.2).
2 Four and six column layouts do not render. Note that column layout is kept at three no matter the width of the viewport. (Figures 2.1 and 2.2)

[jl-welch]

This is an issue specific to the example file you downloaded.

.card-columns .card {  
  /*column-break-inside: avoid;*/  
  /*display: inline-block;*/  
  /* width: 100%; */  
}

These styles aren't being applied however you can still see them in the styles tab within the developer tools.

[mdo]

Closing per latest comment, and due to incomplete issue (missing live example, no Bootstrap version specified, no browser version specified).

[pisukes]

Software versions:
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css
Firefox 61.0 64-bit
Chrome 63.0.3239.108 (Official Build) (64-bit)

Living example:
https://jsfiddle.net/eavbjfw9/
This example has class .card-columns .card as follows

.card-columns .card {  
  /*column-break-inside: avoid;*/  
  /*display: inline-block;*/  
  /* width: 100%; */  
}

Firefox renders as expected, but Chrome renders as described in my original post.
If the comments in ".card-columns .card" are removed, the div truncation is solved in Chrome. However, the four and six column layout depending on viewport size still doesn't work.

[AlonsoK28]

Software versions:
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css
Firefox 61.0 64-bit
Chrome 63.0.3239.108 (Official Build) (64-bit)

Living example:
https://jsfiddle.net/eavbjfw9/
This example has class .card-columns .card as follows

.card-columns .card {  
  /*column-break-inside: avoid;*/  
  /*display: inline-block;*/  
  /* width: 100%; */  
}

Firefox renders as expected, but Chrome renders as described in my original post.
If the comments in ".card-columns .card" are removed, the div truncation is solved in Chrome. However, the four and six column layout depending on viewport size still doesn't work.

Works great for me 😋