Content does not fill entire column

**I have to columns and am trying have the content fill entire space of the first column. Result I am trying to achieve is in image 1. The result I get is in image 2. I can manyally spread out the content, but as the browser does the refresh, I am back to image 2.

I tried using display: flex and display: grid., with no effect.
Is there something I can fix in my current code to acieve this, or I should take a different approach? What approach should I take: display: grid, display: flex, or something else?

Many thanks.

Link to my project:


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36

Challenge: Build a Markdown Previewer

Link to the challenge:

try using the auto-fit property for grid view.
Auto-fit collapses those rows and or columns and stretches your item to fit the size of the container.

Also, take look at Auto-placement documentations her, in the last part:

1 Like

Do you need the #positonEditor element? If not I would suggest removing it and just setting the height and width on the textarea to 100%, or you can keep the #positonEditor element and set height and width on both elements. If you want to avoid the horizontal overflow I guess doing 98% width might work, or you can just hide the overflow.

You might also want to disable the resize on the textarea element by setting resize: none

1 Like

I will try these options. Thank you for your detailed answer.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.