如何使用 CSS 修复红色和绿色块？

Question

everyone Would like to ask at present I am making a version when the web page to slide up the red and green block to be fixed, only the yellow block can slide! The current treatment on the green side is using

 position:sticky;
 right:0px;
 top:100px;

The grammar keeps him fixed there, but there's a problem because if you don't give height it looks like it's position:sticky; I want his height to be customizable, so I give him a height of 200px; As a result, when the content is too much or in RWD mode, it goes out of the green zone.

Is there a better way to fix the red and green blocks?

Here's what I'm trying to do so far. https://codepen.io/hong-wei/pen/wvgbbye?editors=1100

Answer 1

Add align-items: flex-start; to your .container class and remove any height value from the aside .

 .wrap{ background-color: #ccc; line-height: 1.5; }.header{ position: fixed; width: 100%; background-color: #f75454; box-shadow:0px 1px 30px #212529; z-index: 1; }.header.list{ display: flex; padding:20px; justify-content:space-between; }.container{ display: flex; padding:30px; padding-top: 100px; background-color: #5c5c5c; align-items: flex-start; }.main{ flex:2; padding:20px; height: 1600px; margin:0px 20px; background-color: #f9cf5a; }.aside{ position:sticky; right:0px; top:100px; padding:20px; flex:1; width: 100%; background-color: #1ba784; color:#eef7f2; }

 <div class="wrap"> <div class="header"> <ul class="list"> <li>測試</li> <li>測試</li> </ul> </div> <div class="container"> <div class="main"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum expedita pariatur facere repellat nobis sed modi, porro, at numquam accusantium aut consequuntur delectus ducimus atque officia dolores, Dolore quas delectus fuga accusantium quia atque esse, non, aut quae optio officia odit natus accusamus? libero iure nam. Accusantium veritatis ad repellat,</p> </div> <div class="aside"> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit, Lorem ipsum dolor sit amet. consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit, Lorem ipsum dolor sit amet. consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.</p> </div> </div> </div>