Position a single div on the left-hand side and arrange two divs on the right using display:flex

Is there a way to achieve this layout without adding another div, using only parents and 3 child elements? I had tried using height: max-content, but it didn't work as expected.

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: 54%;
  background: #000;
  margin: 1px;
  height: max-content;
}

.item.itm1 {
  flex-basis: 44%;
  height: 100px;
}
<div class="container">
  <div class="item itm1">1</div>
  <div class="item itm2">2</div>
  <div class="item itm3">3</div>
</div>

htmlcssflexbox

Answer №1

In my perspective, I believe that achieving your desired layout may not be possible using only "flex". However, if you are open to adding an additional "div", then it can be done. Below is the code snippet that demonstrates how this can be achieved.

<div class="wrapper">
    <div class="box box1">1</div>
    <div style="display: flex; flex-direction: column; width: 55%">
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </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

The Faux-Dynamic News Feed on a stationary website

As I work on revamping my employer's static website, it has become clear that a news section needs to be integrated. The site is being built using the Bootstrap 3.0 framework. My plan is to implement the following strategy: I aim to have a JavaScrip ...

javascriptjsonhtmltwitter-bootstrap

Touch interaction operates differently than mouse movement

Imagine three neighboring divs, div1, div2, and div3. When I click on div1 and then move my mouse to div2, the mousemove event is triggered with div2 as the target. However, on mobile devices, if I tap on div1 (touchstart) and slide my finger to div2, the ...

javascripthtml

Is there a way for me to determine when my web browser has completed loading the entire page?

Similar Question: How to Detect When a WebBrowser Has Finished Loading a Page Is there a way to determine if my web browser has completed loading all content on the page? In C#, is it possible to display multiple pages in sequence without allowing na ...

c#html.netbrowser

Interacting with blog posts through comments on both Facebook and the blog's official page on the social media

I'm currently working on a PHP blog and I am looking to integrate Facebook comments into each blog post. My goal is for these comments to be visible both on the website and on its corresponding Facebook page, allowing users from different platforms to ...

phphtmlfacebookfacebook-comments

Drop-down menu for every individual cell within the tabular data

I'm working with a large HTML table that looks like this: <table> <tr> <td>value1</td> <td>value2</td> </tr> <tr> <td>value3</td> <td>value4 ...

javascripthtmlcss

What could be the reason for the onClick event functioning only once in HTML?

Below is the code snippet containing both HTML and JavaScript. However, the issue I am facing is that the onclick event only seems to work for the first <li>. <!DOCTYPE html> <html> <body> <ul class="list"> <li ...

javascriptjqueryhtml

Avoiding line breaks for a div positioned on the right within a flexible container

My current design consists of a red bar inside a container that is positioned between two black boxes. The size of the boxes remains fixed, while the red bar and container are both based on percentages. I am aiming to decrease the size of both the contain ...

htmlcss

Locating the elusive sequence number within a document

Greetings, I am currently trying to locate a missing number within an xml file but seem to be encountering some challenges. Any suggestions or ideas would be greatly appreciated. Example The file contains an <a> tag with various ids such as page-1, ...

javascriptjqueryhtmlfindsequence

The browser is struggling to interpret the incorrect HTML content

I am looking for a way to create a function that can retrieve account data from my database and organize it in a user-friendly HTML table where users can make selections and modifications. The code I have so far is as follows: $.ajax({ url: "./dat ...

javascripthtmldom

Highlighting a Table Column with a Radio Button

I am struggling with controlling the highlight of a table using only radio buttons. When I try to change the selector to input:radio, it doesn't work as expected. It seems to only work with the selector provided in my code snippet. $("th").on("clic ...

javascripthtmlcss

What is the process for setting a linear gradient border color on a table row's border?

Currently, I am attempting to apply a linear gradient border color to the table row. Below are the codes for the table: td:first-child { border-left: 1px solid black; border-bottom-left-radius: 50px; border-top-left-radius: 50px; } td:last-child { bor ...

csshtml-table

Ways to ensure next/image takes up all available grid space

Is there a way to make the next/image element span from grid 1 through 8? It seems to work fine with the imgtag but not with next/image. .project { display: grid; margin-bottom: 4rem; grid-template-columns: repeat(12, 1fr); align-items: center; } ...

cssreactjsnext.jsnextjs-image

Utilizing the '<' or '>' operator in combination with an if statement within a Repeater component

Is it possible to use an if statement in a repeater like this? <%#Eval("FN").ToString().Count > 0 ? "SB" : "" %> When I try to implement this, I receive an error 73 indicating that the > operator cannot be used. How can I adjust it so that i ...

htmlasp.netif-statement

Eliminating pre-set CSS styles injected in Angular 2/Ionic 2 automatically

I'm encountering an issue where adding the ionic 2 gesture (press) to a button results in inline styles being automatically applied to that button. Is there a way to override the styles it adds? Button <button ion-button (press)="toggleFavourite ...

htmlcssangulartypescriptionic2

Are there any Bootstrap 4 classes that have the "cursor:pointer" style other than "btn"?

I am currently utilizing the Bootstrap cards class for my project and I am trying to achieve a cursor pointer effect when hovering over certain cards. However, I prefer not to resort to using the style attribute and only want to utilize Bootstrap classes ...

cssbootstrap-4

The art of fluidly positioning elements in Bootstrap columns

My goal is to showcase objects in 3 columns using Bootstrap 4. However, when I implement the code provided, the objects are only displayed in a single column, as shown here: example of 1 column layout. What I actually want is for the objects to be arrange ...

cssangularjstwitter-bootstrapbootstrap-4

JavaScript Calculator experiencing difficulty with adding two numbers together

I've been working on developing a calculator using HTML and JavaScript, but I'm facing an issue when trying to add two numbers together. Strangely enough, when attempting to calculate 1 + 0, I get the result of 512, and for 1 + 1, it returns 1024 ...

javascripthtmlcssmathbootstrap-4

Issue: Invalid element type detected: expected a string (for built-in components) or a class/function

Currently, I am in the process of learning how to make API calls using React Redux. I decided to practice by implementing an example in StackBlitz. However, I encountered an error after selecting a channel and clicking on the 'Top News' button. C ...

htmlcssjsonreactjsredux

Utilize the v-for second argument in VueJS 2 to showcase the index and index+1

For a VueJS 2 project, I am tasked with enhancing the display of the first and second elements in an array by making them stand out from the rest. To achieve this, I am utilizing the v-for syntax to iterate over a child component within a parent component. ...

javascripthtmlcssvuejs2v-for

incorrect <div> <img src="<?php under construction?"

When I try to display images using the construction <div> <img src="<?php..., the images appear as intended. However, there are extra strings leftover from my code after each image. An excerpt of the problematic code: First, I retrieve ...

phphtml