CodePen Embed - Container Quries Demo

Live

​x
 
<div class="card">
    <p class="text">
    Lorem ipsum dolor 
    </p>
</div>
​
<div class="card">
    <p class="text">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    </p>
</div>
​
​
<div class="card">
    <p class="text">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor architecto reprehenderit quaerat veniam quibusdam enim et! Quaerat reiciendis, corrupti cupiditate amet at doloribus veritatis maxime vitae, distinctio consectetur consequatur quos? 
    </p>
</div>
​
​
​

Live

xxxxxxxxxx
 
html, body {
    width: 100%;
    height: 100%;
}
body {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: #ffc048;
}
​
.card {
    position: relative;
    margin: auto;
    width: 350px;
    height: 120px;
    background: #fff;
    border: 1px solid #000;
    // resize: horizontal;
    // overflow-x: scroll;
    font-size: 18px;
 
    p {
        font-size: 36px;
        line-height: 1.5;
        padding: 8px;
    }
}
​
.card:nth-child(2) {
    width: 600px;
}
.card:nth-child(3) {
    width: 750px;
}
​
​
.card {
  /* CSS CONTAINER */
  container-type: inline-size;
  container-name: card;
}
​
@container card (min-width: 400px) {
    .card p {
        font-size: 24px;
    }
}
​
@container card (min-width: 650px) {
    .card p {
        font-size: 18px;
    }
}
​
​

This Pen is owned by mafqla on CodePen. It is a fork of this Pen.

See more by @mafqla on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":4,\"theme\":\"twilight\",\"id\":\"vYMjRzV\",\"auto_save\":true},\"hashid\":\"vYMjRzV\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":74267316,\"user_id\":5382232,\"html\":\"<div class=\\\"card\\\">\\n    <p class=\\\"text\\\">\\n    Lorem ipsum dolor \\n    </p>\\n</div>\\n\\n<div class=\\\"card\\\">\\n    <p class=\\\"text\\\">\\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. \\n    </p>\\n</div>\\n\\n\\n<div class=\\\"card\\\">\\n    <p class=\\\"text\\\">\\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor architecto reprehenderit quaerat veniam quibusdam enim et! Quaerat reiciendis, corrupti cupiditate amet at doloribus veritatis maxime vitae, distinctio consectetur consequatur quos? \\n    </p>\\n</div>\\n\\n\\n\",\"css\":\"html, body {\\n    width: 100%;\\n    height: 100%;\\n}\\nbody {\\n    display: flex;\\n    flex-wrap: wrap;\\n    flex-direction: column;\\n    background-color: #ffc048;\\n}\\n\\n.card {\\n    position: relative;\\n    margin: auto;\\n    width: 350px;\\n    height: 120px;\\n    background: #fff;\\n    border: 1px solid #000;\\n    // resize: horizontal;\\n    // overflow-x: scroll;\\n    font-size: 18px;\\n \\n    p {\\n        font-size: 36px;\\n        line-height: 1.5;\\n        padding: 8px;\\n    }\\n}\\n\\n.card:nth-child(2) {\\n    width: 600px;\\n}\\n.card:nth-child(3) {\\n    width: 750px;\\n}\\n\\n\\n.card {\\n\\t/* CSS CONTAINER */\\n\\tcontainer-type: inline-size;\\n\\tcontainer-name: card;\\n}\\n\\n@container card (min-width: 400px) {\\n    .card p {\\n        font-size: 24px;\\n    }\\n}\\n\\n@container card (min-width: 650px) {\\n    .card p {\\n        font-size: 18px;\\n    }\\n}\\n\\n\",\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"babel\",\"html_classes\":\"\",\"css_starter\":\"reset\",\"js_library\":null,\"created_at\":\"2024-04-10T06:52:38.337Z\",\"updated_at\":\"2024-04-10T06:52:38.337Z\",\"title\":\"Container Quries Demo\",\"description\":\"\",\"slug_hash\":\"vYMjRzV\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":false,\"parent_id\":62733596,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"018ec6c7-ac41-7707-8f8f-541a930cf141\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://public.codepenassets.com/css/normalize-5.0.0.min.css","__pen_prefix_free_url":"https://public.codepenassets.com/js/prefixfree-1.0.7.min.js","__pen_reset_css_url":"https://public.codepenassets.com/css/reset-2.0.min.css"}