如何处理高度不同的布局列？

Question

To be specific, my problem is that I have a 2-column layout page, that depending on how long the article text is, might make the right side too out of place since if for example the article text on the left side is too short, it will make the right side too long.

It's actually okay if the left side will be longer than the right side but not good if otherwise.

So probably my question is, in the event that the right column is way longer than the left column, what do you usually do to make the right column stop scrolling when its maximum height is reached while the left one is still scrolling?

Answer 1

You can use display: flex to specify how much width each article column should take up:

 .container { display: flex; } .a1 { background: orange; flex: 1; } .a2 { background: red; flex: 1; } 

 <div class="container"> <article class="a1"> <h1>Article 1</h1> <p>This is some text for article one, it does not change the size of the article!</p> </article> <article class="a2"> <h1>Article 2</h1> <p>This is some text for article two, it does not change the size of the article! Yay!!!!</p> </article> </div>