In a bootstrap column containing an inner element with a wide width that is taking up more space than intended

I am attempting to create two columns of equal size, containing nested elements with large dimensions and adding overflow: scroll;. However, the column width is defaulting to 100%. Interestingly, when I apply a small width to the column (

), the issue is resolved and the columns become 50% each. My goal is to understand why the column width is automatically set to 100% and how I can achieve the desired outcome without specifying a width for the column.

<div class="row">
          <div class="col" style="background:blue">
            <div style="overflow:scroll;">
              <div style="width:10000px;">should be overflowed and 50%</div>
            </div>
          </div>
          <div class="col" style="background:yellow">should be 50%</div>
        </div>

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Answer №1

To effectively handle a column with a large amount of content, make sure to include the Bootstrap class overflow-auto.

Take a look at the code snippet below for reference.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1"></title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf7fafad0d7d0d6c5d4e0f5eecff0ece1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrite="sha384-fsLjd81HzZFIxuIyyjaTnmnq581SHznFgwwNWQWz" crossorigin="anonymous"></script></style>

Answer №2

One potential solution is to transform the row into a flexbox layout and designate a maximum width for the column.

.row {
  display: flex;
}

.col {
  max-width: 50%;
}
<div class="row">
  <div class="col" style="background:blue">
    <div style="overflow:scroll;">
      <div style="width:10000px;">should overflow at 50%</div>
    </div>
  </div>
  <div class="col" style="background:yellow">should occupy 50%</div>
</div>

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

Updating the background image without having to validate the cache

I have implemented a basic image slideshow on my website using a simple Javascript function. The function runs every 5 seconds to update the CSS "background-image" property of a div element. While it is functional, I've noticed that each time the func ...

javascriptcss

jQuery show/hide functionality allows you to toggle the visibility of elements

I am looking to create a toggle button that expands the menu-wrapper width and hides the sidebar when clicked. Here is the initial CSS styling: #my-wrapper { Width:500px; } #sidebar-wrapper { width:200px; } Upon clicking the button, the CSS will update ...

javascriptjqueryhtmlcss

CSS for two columns with a width of 50% each

Below is a table for reference: <table width="100%"> <tr> <td id="td1"></td> <td id="td2"></td> <td id="td3"></td> <td id="td4"></td> </tr> </table> Is there a wa ...

htmlcss

Why does using rgba color with an alpha value cause my div to become see-through?

I am currently attempting to assign a background color to a specific style of pop-up, but whenever I use a value that includes an alpha channel, it ends up being transparent. This is the CSS code I have been using: --color: 255, 144, 106, 0.18; background ...

javascriptcss

Error message indicating that the event "OnkeyDown" is not in sync within the React application

Hey everyone! I'm a beginner in web development and I'm struggling to understand why the event "OnKeyDown" is triggered the second time. My task involves changing (increasing, decreasing) parts of a date (day, month, year, hour, minutes, seconds) ...

javascripthtmlreactjskeydown

Unable to Achieve Full Height with Vuetify Container

Challenge: I'm facing an issue with my <v-container> component not consistently spanning the entire height of the application. Despite trying various methods such as using the fill-height property, setting height: 100%;, height: 100vh;, and expe ...

javascripthtmlcssvue.jsvuetify.js

Achieving a responsive card layout in Reactjs with Bootstrap by displaying four cards in a single row

const DisplayCategory = () => { const history = useHistory(); useEffect(() => { axios.get('http://localhost:8080/products', { headers: { Authorization: "Bearer " + localStorage.getItem("token&q ...

htmlcssreactjs

What could be causing this div to shift positions when the browser window is resized?

When resizing the browser, I'm having trouble keeping the div boxes in place. The bottom-right lower div (vd-grid-sub-box) keeps shifting away when I slightly decrease the browser size. Additionally, vd-grid-right-col overlaps with the banner if the s ...

htmlcss

Creating a Dynamic Canvas Rendered to Fit Image Dimensions

I'm struggling with a piece of code that creates an SVG and then displays it on a canvas. Here is the Jsbin Link for reference: https://jsbin.com/lehajubihu/1/edit?html,output <!DOCTYPE html> <html> <head> <meta charset=&qu ...

javascripthtmlcsssvghtml5-canvas

Retrieving the first five rows from a table with data entries

My task involves working with a table named mytbl, which contains 100 rows. I need to extract only the first five rows when a user clicks on "Show Top Five." Although I attempted the following code, the alert message returned 'empty': var $upda ...

javascriptjqueryhtml

What is the best way to personalize Material UI elements, such as getting rid of the blue outline on the Select component?

Embarking on my journey of developing a React app, I made the decision to incorporate Material UI for its array of pre-built components. However, delving into the customization of these components and their styles has proven to be quite challenging for me ...

javascriptcssreactjsmaterial-ui

"Implementing master page and CSS styles on a child page: A step-by-step

Currently, I have a master page that is successfully being applied to all of my pages. However, it seems to be encountering an issue when trying to locate the CSS file address for pages within child folders. The folder structure looks like this: <scri ...

asp.netcssmaster-pages

Personalizing MaterialUI's autocomplete functionality

Trying to implement the material-UI Autocomplete component in my react app and looking for a way to display a div when hovering over an option from the list, similar to what is shown in this reference image. View example If anyone has any tips or suggest ...

javascripthtmlcssreactjsmaterial-ui

Monitor the traffic on my website by implementing .htaccess restrictions

I am maintaining a website with restricted access to specific IP addresses listed in the .htaccess file. I am looking to implement a logging system that tracks unauthorized attempts to access the site. Is it feasible to record each attempt in a database? ...

phphtmldatabase.htaccessip

Reordering sections in a dynamic manner

I'm working on a single-page website with four sections arranged like this: <section id=“4”> <section id=“3”> <section id=“2”> <section id=“1”> Now, I want to change the order of these sections when scrolling ...

javascriptjqueryhtml

Concatenating strings with JavaScript

I am currently working on building a web page using a combination of html and javascript. I have a json file that provides inputs for some specific content I need to display. My main goal is to set up an address variable in order to show the Google Maps AP ...

javascripthtmljsongoogle-maps

Creating a Background Cutout Effect with CSS Using Elements instead of Images

I'm working on creating a unique visual effect that simulates a "window" where the div placed above all other elements acts like a window, allowing the background color to show through. Take a look at this example for reference. My goal is to make th ...

cssz-index

Separate Your Navbar with Bootstrap 4 Separators

I'm facing a challenge in adding separators within a navigation bar between the navigation items. I am unsure how to evenly space out the padding on these separators next to each navigation item. https://i.sstatic.net/vjYti.png Another issue I encou ...

htmlcssbootstrap-4

The setting "break-word" within word warp attribute isn't effective for formatting my text

Here is the CSS code that I am using: .SubjectCell{ width: 300px; padding-left: 3em; padding-right: 2em; color: black; font-size: 20px; word-wrap:break-word; } I have applied this class to a table cell within a table in my datalist: <td class ...

css

Extract data from the HTML source code in JavaScript and transfer it to a personalized JavaScript variable within Google Tag Manager

Running an e-commerce website on Prestashop and facing an issue with data layer set up. Instead of a standard data layer, the platform generates a javascript variable called MBG for Enhanced E-Commerce implementation. <script type="text/javascript"> ...

javascriptjqueryhtmlgoogle-tag-managergoogle-datalayer