動態高度列

Question

<div class="grid"> 
    <div class="grid__item topbar"></div> 
    <div class="grid__item title"></div> 
    <div class="grid__item box1"></div> 
    <div class="grid__item box2"></div> 
    <div class="grid__item box3"></div> 
    <div class="grid__item box4"> 
    <button class="add-content-btn">Add content</button> 
    <p>Dynamic content</p> 
    </div> 
    <div class="grid__item sidebar"> 
    <button class="add-content-btn">Add content</button> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    <p>Dynamic content</p> 
    </div> 
</div> 

body { 
    padding: 16px; 
} 

.grid { 
    display: grid; 
    grid-gap: 10px; 
    grid-template-areas: 
    "topbar topbar" 
    "title sidebar" 
    "box1 sidebar" 
    "box2 sidebar" 
    "box3 sidebar" 
    "box4 sidebar"; 
    grid-template-columns: 70% 30%; 
    grid-template-rows: 28px 30px 500px 50px 20px auto; 
} 

.grid__item { 
    border: 1px solid black; 
} 

.topbar { 
    grid-area: topbar; 
} 

.title { 
    grid-area: title; 
} 

.box1 { 
    grid-area: box1; 
} 

.box2 { 
    grid-area: box2; 
} 

.box3 { 
    grid-area: box3; 
} 

.box4 { 
    grid-area: box4; 
    padding: 10px; 
} 

.sidebar { 
    grid-area: sidebar; 
    overflow: scroll; 
    padding: 10px; 
} 

const btns = document.querySelectorAll('.add-content-btn'); 
btns.forEach(btn => { 
    btn.addEventListener('click', e => { 
    const parent = e.target.parentElement; 
    for (let i = 0; i < 3; i++) { 
     const newLine = document.createElement('p'); 
     newLine.innerText = 'Dynamic content'; 
     parent.append(newLine); 
    } 
    }); 
}) 

http://codepen.io/dye/pen/YVyoVd

在這種佈局中CSS格，我有2列，可以在每個大小增長。我希望右列的高度由左列的高度來控制，但不是相反。

單擊左下角框中的「添加內容」按鈕將增大左欄和右欄。這按預期工作。

目前，點擊右欄中的「添加內容」按鈕會增大左欄。這是無意的。我希望右列的高度至多是左列的高度，並且可以滾動內容。這可能與CSS網格或我需要使用JS？

Answer 1

您可以在絕對位置使用額外的包裝，以避免與原始佈局的交互。

const btns = document.querySelectorAll('.add-content-btn'); 
 
btns.forEach(btn => { 
 
    btn.addEventListener('click', e => { 
 
    const parent = e.target.parentElement; 
 
    for (let i = 0; i < 3; i++) { 
 
     const newLine = document.createElement('p'); 
 
     newLine.innerText = 'Dynamic content'; 
 
     parent.append(newLine); 
 
    } 
 
    }); 
 
})

body { 
 
    padding: 16px; 
 
} 
 

 
.grid { 
 
    display: grid; 
 
    grid-gap: 10px; 
 
    grid-template-areas: "topbar topbar" "title sidebar" "box1 sidebar" "box2 sidebar" "box3 sidebar" "box4 sidebar"; 
 
    grid-template-columns: 70% 30%; 
 
    grid-template-rows: 28px 30px 500px 50px 20px auto; 
 
} 
 

 
.grid__item { 
 
    border: 1px solid black; 
 
} 
 

 
.topbar { 
 
    grid-area: topbar; 
 
} 
 

 
.title { 
 
    grid-area: title; 
 
} 
 

 
.box1 { 
 
    grid-area: box1; 
 
} 
 

 
.box2 { 
 
    grid-area: box2; 
 
} 
 

 
.box3 { 
 
    grid-area: box3; 
 
} 
 

 
.box4 { 
 
    grid-area: box4; 
 
    padding: 10px; 
 
} 
 

 
.sidebar { 
 
    grid-area: sidebar; 
 
    position: relative; 
 
} 
 

 
.buffer { 
 
    padding: 10px; 
 
    position:absolute; 
 
    top:0; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
    overflow:auto; 
 
}

<div class="grid"> 
 
    <div class="grid__item topbar"></div> 
 
    <div class="grid__item title"></div> 
 
    <div class="grid__item box1"></div> 
 
    <div class="grid__item box2"></div> 
 
    <div class="grid__item box3"></div> 
 
    <div class="grid__item box4"> 
 
    <button class="add-content-btn">Add content</button> 
 

 
    <p>Dynamic content</p> 
 
    </div> 
 
    <div class="grid__item sidebar"> 
 
    <div class="buffer"> 
 
     <button class="add-content-btn">Add content</button> 
 
     <p>Dynamic content</p> 
 
     <p>Dynamic content</p> 
 
     <p>Dynamic content</p> 
 
     <p>Dynamic content</p> 
 
     <p>Dynamic content</p> 
 
     <p>Dynamic content</p> 
 
     <p>Dynamic content</p> 
 
     <p>Dynamic content</p> 
 
     <p>Dynamic content</p> 
 
     <p>Dynamic content</p> 
 
     <p>Dynamic content</p> 
 
    </div> 
 
    </div> 
 
</div>

---

從我的評論：

你可以嘗試max-height和overflow，但規格目前還不清楚這件事，Firefox會顯示滾動，其中Chrome不會http://codepen.io/gc-nomade/pen/Wjryym

你應該繼電器上的JavaScript或使用absoluteposition設置一個額外的元素欄http://codepen.io/gc-nomade/pen/JNGZwW