У меня есть список блоков, которые я хочу отобразить в нескольких столбцах (не менее 2 столбцов). В моих блоках у меня есть заголовок с заголовком и значок svg.
Если я использую свойство css "column-count" для разделения содержимого на столбцы, некоторые svg исчезают в Google Chrome. (нет проблем с Firefox)
Вот демо:
section {
width: 500px;
margin-right: 100px;
float: left;
}
.container {
border: 1px solid black;
margin: 0 auto;
padding: 0.25em;
margin-top: 1.25em;
}
.container.withcolumns {
column-count: 2;
column-gap: 2em;
}
.block {
break-inside: avoid-column;
}
.block header {
font-weight: bold;
padding: 0.5em 0;
border-bottom: 1px solid grey;
}
.block header svg {
width: 15px;
height: 15px;
margin-right: 0.5em;
}
ul,
li {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
margin: 0.25em 0;
}<section>
<h1>First block without columns</h1>
<div class='container'>
<div class='block'>
<header>
<svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>
Block 1</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 2</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 3</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 4</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
</section>
<section>
<h1>Same code with columns</h1>
<div class='container withcolumns'>
<div class='block'>
<header>
<svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>
Block 1</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 2</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 3</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 4</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</section>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="svg-capacity" viewBox="0 0 17.293 20">
<path d="M2674.323,1341a2.012,2.012,0,1,0-1.437-.575,2,2,0,0,0,1.437.575Zm1.52,1h-3.053a2.012,2.012,0,0,0-2.027,2v5.494h1.52V1357h4.067v-7.507h1.533V1344a2.022,2.022,0,0,0-2.039-2Zm-11.693-1a2,2,0,1,0-2.027-2,2.023,2.023,0,0,0,2.027,2Zm1.52,1h-3.04a2.015,2.015,0,0,0-2.04,2v5.493h1.533V1357h4.067v-7.507h1.52V1344a2.015,2.015,0,0,0-2.04-2Z" transform="translate(-2660.59 -1337)"></path>
</symbol>
</svg>Кто-нибудь знает, как это исправить?
С Уважением
