contejner query testík

by Petr Haluza

HTML

<div class="flex">

<div class="p40">
	
	<div class="test-container">
    <div class="test">test</div>
</div>


</div>
<div class="p60">

<div class="test2-container">
    <div class="test2">test2</div>
</div>

</div>
</div>

CSS

.flex {display: flex}
.p40 {  width: 40%;}
.p60 {  width: 60%;}

div {container-type: inline-size;}



.test-container { container-name: testContainer}
.test2-container { container-name: test2Container}
@container testContainer (width < 300px) {
  .test { background-color: red;}
}
@container test2Container (width < 700px) {
  .test2 { background-color: #000;}
}