Maintain consistent grid proportions even when content overflows

I came across this issue: https://jsfiddle.net/w19hpqzx/

However, I'm aiming for a layout that resembles this: https://jsfiddle.net/4smwop2u/

Specifically, I'd like the yellow aside portion to stay visible on the screen and for the code block .code-toolbar to have a scrollbar.

One solution is to set a fixed width like this:

.code-toolbar {
  max-width: 300px;
  overflow-x: auto;
}

However, I prefer the code block to take up 100% of the space regardless of the container size. Is there a way to achieve this?

htmlcsscss-grid

Answer №1

To create equal-width columns within a container, simply set them to 50% each.

.container {
  display: grid;
  grid-template-columns: 50% 50%;
}

UPDATE

If you prefer to use grid-template-columns: 1fr 1fr, you can apply the following style to your first grid element (main):

min-width: 0;
overflow: scroll;

This adjustment addresses the issue where a grid item is restricted from being smaller than its content, offering a solution to this constraint.

After implementing this change, feel free to remove the overflow from .code-toolbar.

Answer №2

One effective way to achieve this is by utilizing the calc() CSS function, as outlined in the documentation:

grid-template-columns: calc(100% - 450px) 450px;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Capture line breaks from textarea in a JavaScript variable with the use of PHP

I need help with handling line breaks in text content from a textarea. Currently, I am using PHP to assign the textarea content to a Javascript variable like this: var textareaContent = '<?php echo trim( $_POST['textarea'] ) ?>'; ...

javascriptphphtml

Responsive Bootstrap 5 table - occupies full width on mobile devices, adjusts automatically on desktop screens

Is there a way to create a table that is full width on mobile using pure bootstrap classes, but only auto width on desktop? I attempted to achieve this with the following code: <table class="table table-bordered w-md-auto w-100 text-start mb-2&quo ...

htmlcssbootstrap-5

Incorporating .txt files into a static webpage using only HTML and JavaScript

Exploring the realm of web page creation for the first time has left me in need of some guidance. I have successfully added an upload feature for text files on my web page, but I am struggling to embed a text file directly into the page source. With Java s ...

javascripthtml

What is the best way to configure a CakePHP method to generate standard HTML output when the controller is set to default JSON?

Currently, I am working on developing an Android application and utilizing CakePHP on the server side. I have a UsersController that provides JSON data for functionalities like login, registration, etc, except for account activation. As account activatio ...

htmljsoncakephpviewoutput

What is the best method for adding a line break in the body of an email when we include the recipient, subject, and message?

Do you have a requirement where information needs to be sent to an end user via Gmail (preferred) and they need to click on a button in the email body to respond? The button response is set up with predefined to, subject, and body fields, but there are dif ...

htmlformsgmail

Increasing and decreasing values

I'd like to create two buttons for increasing and decreasing a value. For example, if the variable k is initially set to 4 and I press the decrement button, it should decrease from 4 to 3. This is what I attempted: var k = 1; function qtrFunction ...

javascripthtml

Choosing the div elements that have a PNG background image assigned to them

Is there a way to use jQuery to target all the div elements with a background-image property set to url(somepath/somename.png) in their style? ...

jqueryhtmlpngjquery-selectors

BeautifulSoup: Retrieve text from HTML lists that are designated exclusively with bullet points

Seeking assistance on how to extract the text specifically within a bulleted list from a Wikipedia article using BeautifulSoup. I am aware that list items are enclosed in <li> tags in HTML, regardless of the type of marker used before each item in t ...

pythonhtmlbeautifulsoup

Positioning Text at the Top alongside the Fresh Twitter Button

Trying to integrate the new Twitter button into a Wordpress template has been a bit of a challenge. I'm aiming to have the text aligned with the top edge of the button rather than being centered within it. The specific code segment responsible for pla ...

phpcss

Troubleshooting: JQuery - Applying CSS to dynamically generated elements

I used JQuery to dynamically generate a table, but I'm having trouble applying CSS to the columns. You can see an example at this Codepen link here. Specifically, I need to set the width of the first column to 100px. Could someone please assist me wi ...

javascriptjqueryhtmlcss

What steps can be taken to create a seamless navigation experience that effectively emphasizes the user's current location?

Is there a way to dynamically add the "current" class to the navigation menu based on the user's current location on the page? This would make it easier for users to see which section of the site they are viewing as they scroll through. Check out this ...

javascripthtmljquery

Employing conditional statements to adjust the size of an image or background identifier in JavaScript

As I dive into the world of Javascript, I find myself faced with the challenge of modifying existing code using if / else statements. The original code snippet in question is as follows: document.getElementById("button1").addEventListener("click", functio ...

javascripthtml

CSS transitions following with visual/codepen

Does anyone know how to animate two images, bringing them to a central point before rotating them simultaneously? I'm struggling with transforming the svgs prior to starting the animation. Take a look at this example. My goal is to apply transform: r ...

csscss-animations

Adding space around images in JavaFX

Just a quick question. I'm wondering if there is a way to apply padding to an ImageView using CSS in JavaFX. I've attempted insets, padding, and other methods with no success. Alternatively, can the same effect be achieved with a Text Object? ...

javacssjavafx-8

Retrieving information from the query string and showcasing it on a client-side label

I'm facing an issue where I need to update a small part of text in a label based on the query string. The code snippet I am currently using is Text = "after 30 June "'<%=Request.QueryString ("Year")%>'" in the comments field" However ...

asp.nethtmllabelquery-stringclient-side

Can passing parameters between nested map functions cause any issues?

While attempting to navigate to a page in reactjs and pass parameters using the useNavigate hook, I encounter an unexpected token error as soon as I include the navigation within the anchor tag. <a onClick={() ={ ...

javascripthtmlreactjs

Designing php/mysql data in a container

After successfully converting an ordered list output into a div output, I now face the challenge of stacking arrays on top of each other (and side by side with the two divs) like they would in an ordered list. Here is the original code snippet: <?php ...

phphtmlcssarrays

What is the process for integrating require.js and jquery.min.js?

I am facing an issue with a specific piece of code: <script data-main="http://northapp.co/_a/js/main.min.js" src="http://northapp.co/_a/js/require.js"></script> Why am I unable to connect require.js with jquery.min.js? I have tried the follow ...

javascriptjqueryhtmlajaxrequirejs

What is the best way to link and store invoice formset with the main form foreign key in Django?

I am new to Django and need help. I am trying to save my invoice in a database, but the issue I'm facing is that I can't retrieve the foreign key from the main form when I try to save the formset. View.py def createInvoice(request):` if requ ...

javascriptpythonhtmldjango

What steps should I take to confirm the text exists within a particular <DIV> element using Selenium WebDriver (java) and Chrome?

Background: My current setup involves using Selenium WebDriver with Java and utilizing Google Chrome as the browser. I have a question regarding locating specific text on a webpage. What if there are multiple instances of the same text that I am looking f ...

javahtmlseleniumxpathselenium-webdriver