The inner div is too big for the outer div to contain

I am facing an issue with three div elements, where the first (content) contains two nested div elements.

While in Chrome, the last two div elements fit perfectly inside the first div, in MS Edge, the last div does not and starts after the first div on the screen.

How can I ensure that both the last two div elements fit inside the first div?

For example, B and C should be contained within A: 

.content {
  background: #f0f0ed;
  border-radius: 5px;
  position: relative;
  background-color: white;
}

.B{
    height: 100%;
    margin: 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
<div class="content">
  <div class="B"></div>
  <div class="col-12"></div>
</div>

htmlcssbootstrap-4

Answer №1

If you are looking to customize the layout of your divs and the content inside, one approach is to set the outer div to display: flex and apply flex basis values to the inner divs

Edit: (apologies for the brief response earlier, I was away from my desk)

You can try this CSS code snippet:

.content {
  display: flex;
}
.B {
  flex: 0 0 50%;
}
.col-12{
  flex: 0 0 50%;
}

By default, using display: flex will align elements horizontally. If you prefer a vertical layout, simply add flex-direction: column

.content {
  flex-direction: column;
}

Additional styling can be tailored based on your specific design preferences and how you structure your CSS rules in relation to the content within your elements

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

CSS animation is activated solely upon its initial creation

Exploring the world of Vuejs for the first time with my debut project. The core of my project lies in the main component where I have an array as a data variable. Here's an example snippet: export default { name: 'example-component', ...

javascriptcssvue.jscss-animationsvuejs2

A versatile jQuery function for extracting values from a :input selector

Is there a universal method in jQuery to retrieve the value of any :input element? I pose this question because I have a webpage containing select and checkbox inputs, as seen in the code below: for (var i = 0; i < arguments.length; i++) { ...

javascriptjqueryhtmlselector

Extension Overlay for Chrome

I'm currently working on developing a Chrome extension, but I'm encountering some confusion along the way. Despite researching online, I keep receiving conflicting advice and haven't been able to successfully implement any solutions. That&ap ...

javascriptjqueryhtmlcssgoogle-chrome

"Is it possible to include a button for horizontal scrolling in the table

I have a bootstrap table with overflowing set to auto within its container, along with a locked first column. While a horizontal scroll bar allows for viewing additional data, I am looking to incorporate buttons for navigation as well. Users should have th ...

javascripthtmlcssbootstrap-4

Adding a translucent background image across the entire page in Angular: What's the best method?

I need the background image to extend across the entire page, including covering the Material Data Table. The background should be transparent so that the content of the table remains readable. What is the most effective method to achieve this? Here is th ...

htmlcssangularbackgroundbackground-image

Enhancing text visibility in dompdf by making it bold or increasing its size

Recently, I began using dompdf v0.6.0beta3 along with the dompdf Codeigniter helper in Codeigniter. To address the issue of missing fonts, I manually moved the Arial font family tff files from the Windows 7 font folder to the /lib/fonts directory within do ...

phphtmlcsscodeigniterdompdf

Applying CSS to replicate the vintage iPhone app icon design

I've been searching online for days, but I can't seem to find any helpful resources on how to use CSS3 to style the old iPhone app icon. My goal is to apply a CSS3 style to this curved line, with a fallback option in case older browsers don&apos ...

htmlcsscss-shapes

JS Issue with Generating Content

Introduction( kind of :) ) Starting with the process of generating 5 coffee beans for each cup of coffee. The coffee class includes a strength attribute, and my goal is to visually distinguish the coffee beans which have a strength greater than the select ...

javascripthtmlcsslistclass

Hiding content using the "display: none" CSS property may not function properly

I am facing an issue where my html code for email templates works perfectly on all platforms except for Microsoft Outlook Desktop. The problem lies in the display of product information that is not showing correctly in Outlook. Within my code, I have keys ...

htmlcssemailoutlookhtml-email

Setting distinct fonts for input placeholder and value: A guide

Can different fonts be set for an input placeholder and value? I have a scenario where the input placeholder is in a right-to-left language while the value is in English. Is it achievable using CSS3? ...

htmlcssplaceholderhtml-input

Responsive background image not displaying properly

The developer site can be found at http://www.clhdesigns.com/cliwork/wintermeresod/about.php I am encountering an issue where the background image on the home page scales perfectly, but on the about us page it does not scale at all. I am seeking a solutio ...

htmlcss

How DataTables Handles Loading and Rendering Time Delay

Utilizing DataTables in conjunction with Bootstrap 4 for client-side processing while displaying approximately 2,000 records. The loading time is acceptable, but upon refreshing the page (F5), I observe an unformatted DataTable briefly appearing. It seems ...

javascriptjquerycsstwitter-bootstrapdatatables

Is it possible to use a Wcf polling duplex service with a client that is not using Silverlight?

I've been developing an online TicTacToe game and I'm utilizing a WCF polling duplex service to make it work. However, after dedicating a whole week to research, it seems that this service is only possible for Silverlight clients. If anyone is a ...

javascriptjqueryjsonhtmlwcf

How Webpack 4 Utilizes splitChunks to Create Numerous CSS Files

I need to create multiple CSS files using webpack 4 with the min-css-extract-plugin and splitChunks plugin. Here is my webpack configuration. const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const path = require("path"); module.exports = ...

csswebpackwebpack-4webpack-splitchunks

Customizing the size of dateBox icons in JQuery Mobile

Is there a way to increase the button size within the input box of a dateBox? Currently, it appears small and difficult to click accurately. Additionally, it would be beneficial if clicking anywhere in the input field could open the calendar, instead of ju ...

jqueryhtmljquery-mobile

Obtaining a binary value in the switch component of materialize framework with Typescript

Is there a way in Typescript to assign a value of 1 when a checkbox is checked and 0 otherwise? I am working on a project that uses the materialize framework. Below is the code snippet in question: <div class='switch'> <label&g ...

htmlangulartypescriptmaterializeswitching

Issue with border rendering on triangles in CSS on IE8

I currently have a horizontal navigation bar with triangle borders inserted using :before and :after for each list item. This creates the illusion of a white bordered point on the right side of each list item. The issue I'm facing is that this design ...

htmlcssborderpseudo-element

Setting the height of a webpage element to match the height of the window through CSS

How can I make the .Bck div stretch to the full height of the browser window? I attempted using jQuery, but the height doesn't adjust correctly when I resize the window. What is wrong with my JavaScript and can this be achieved with CSS alone? <!- ...

jqueryhtmlcss

What is the most dependable method for referencing a CSS class through programming?

Within my Sharepoint project, I am dynamically generating controls in the overridden CreateChildControls() method. I am uncertain which approach is more preferable when it comes to referencing the .css file: protected override void CreateChildControls() { ...

htmlcsssharepoint-2010createchildcontrols

Retrieving the Content of Textarea Following Form Submission

When attempting to retrieve the value of my text area after submitting a form, I utilized the following command: $message = $_POST['message']; Unfortunately, this approach did not yield the desired result. This may be due to it not being an inp ...

phphtmltextarea