From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 10 Apr 2023 03:26:07 +0000 (-0700)
Subject: Block container from also resizing vertically
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=e9ad7f74e535931ac87e851a1108d1c4da544b73;p=css-for-line-clamp-ellipsis

Block container from also resizing vertically
---

diff --git a/index.html b/index.html
index 9604fa1..50af36d 100644
--- a/index.html
+++ b/index.html
@@ -102,6 +102,10 @@
       max-block-size: 294px;
     }
 
+    .height-resizable-container {
+      min-block-size: 296px;
+    }
+
     .width-resizable,
     .height-resizable {
       border: 1px dashed hsl(216deg 50% 75%);
@@ -178,7 +182,7 @@ function getLineHeightInPx(elem) {
 const elem = document.querySelector('.dynamic-line-clamp');
 new ResizeObserver(_ => elem.style.setProperty('--lines', Math.floor(elem.clientHeight / getLineHeightInPx(elem)))).observe(elem);</pre>
     <p>Try adjusting the height:</p>
-    <div class="aside-container">
+    <div class="aside-container height-resizable-container">
       <p class="dynamic-line-clamp height-resizable">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
         magna aliqua. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Suscipit adipiscing bibendum