What is the best way to adjust column sizes, setting one with a minimum width while allowing the other to expand to accommodate its content?

In the process of creating a user interface, I have included clickable cards that reveal a detailed panel when clicked.

The detail panel is set to a minimum width of 900px and should adjust to the remaining space between the cards and itself.

The column containing the cards will only display a maximum number of cards per row, each with a fixed width.

https://i.stack.imgur.com/FZ8Oq.png

main{
  display:flex;
  max-width:calc(100vw - 20px);
  background:green;
  padding:10px;
  justify-content:center;
}

.card{
  width:180px;
  height:240px;
  background:blue;
  margin:10px;
}
aside{
  display:flex;
  flex-wrap:wrap;
  width:fit-content;
}
.card-detail{
  background:red;
  padding:10px;
  width:100%;
  min-width:900px;
}
<main>
  <aside>
    <div class="card">
      Card
    </div>
        <div class="card">
      Card
    </div>
        <div class="card">
      Card
    </div>
        <div class="card">
      Card
    </div>
        <div class="card">
      Card
    </div>
  </aside>
  <div class="card-detail">
    Detail
  </div>
</main>

I have created a CodePen to work on this design challenge:

https://codepen.io/williamxsp/pen/XWNyRqJ

htmlcssflexbox

Answer №1

If you're facing an issue, utilize the power of flex-shrink to resolve it. I managed to overcome a similar problem by implementing the following solution.

main{
  display:flex;
  max-width:calc(100vw - 20px);
  flex:0 3 100%;
  background:green;
  padding:10px;
  justify-content:center;
}


aside{
  display:flex;
  flex-wrap:wrap;
  flex-shrink:2;
}
.card{
  width:180px;
  height:240px;
  background:blue;
  margin:10px;
}

.card-detail{
  background:red;
  padding:10px;
  flex-basis:calc(100vw - 55px);
  width:calc(100vw - 55px);
  flex-shrink:1;
}
@media screen and (max-width:991px) {
  main {
    display:flex;
    flex-direction:column;
  }
  .card-detail {
    max-width:100%;
  }
}

For more insights into flex-boxes, check out this resource:

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

What is the proper method for changing the height of this component in HTML?

Hey there! I'm brand new to HTML and I'm embarking on a little project for myself to enhance my skills. I have a question about adjusting the height of some text - I want it to look similar to Twitter, where each "tweet" is clearly separated from ...

htmlcss

Align columns to the right and left using Bootstrap

It should be simple enough, but I can't seem to find my mistake. Goal: The entire markup should be centered with a width of col-10. Within the same 10-column width, there should be two divs each taking up 50% of the space. Using Bootstrap 5, for so ...

htmlcsstwitter-bootstrapbootstrap-5

I am looking for an HTML solution that allows me to neatly stack photos of different sizes in two columns, always prioritizing the column with more empty space

Is there an easy method to populate two columns, each with a width of 50%, with photos in a way that the next photo is always added to the column with more available space? The photos come in different sizes but should be able to fit within the width of t ...

htmlcssstackalignment

Customize the Vuetify 2.0 sass variable $heading-font-family

I'm currently trying to customize the default variable $heading-font-family in Vuetify 2.0.0-beta.0, but I'm encountering issues with this particular override. Oddly enough, I have been successful in overriding other variables such as $body-font- ...

cssvue.jssassvuetify.js

Screen proportions altered - Background image disappearing | Unusual occurrences |

If you look at my site everything seems to be ok, ... untill you minimize the website. A horizontal scrollbar appears and when you use that scrollbar, you will see that my image has vanished. My Website I made that image responsive...so i have no idea wh ...

htmlcss

What are the steps for sharing and sending content using email?

I have a website and I'm looking for a way to post content via email, similar to popular social networks like Facebook and Flickr. For example, I'd like to send a message to '[email protected]'. The title would be stored in a MySQ ...

phphtmlmysqlapache

JavaScript's failure to properly handle UTF-8 encoding

Here is a snippet of code that I found on Stack Overflow and modified: <?php header('Content-Type: text/html; charset=ISO-8859-1'); $origadd = $_SESSION["OriginAdd"] // $_SESSION["OriginAdd"] contains the value "rueFrédéricMistral"; echo $o ...

javascriptphpjsonhtml

Is it possible to create a button on my website that, when clicked, sends data to my Python script?

I need some help with my project - I'm trying to figure out how to create a button on my website that, when clicked, will display a string in my Python terminal. Can anyone offer some guidance on how to achieve this? Thanks in advance! ...

pythonhtml

I am encountering issues with my XPath in certain scenarios

When attempting to do an assertion with the total of a dynamic table, I am encountering difficulties writing XPath that works for all scenarios. The issue arises because the table sometimes contains only 1 image and other times it may contain 5 images. In ...

htmlcssseleniumxpath

Setting a variable for a JavaScript function to insert a video - a step-by-step guide

Here is a grid structure that I am working with: <div class="main"> <ul id="og-grid" class="og-grid"> <li> <a href="http://..." data-video="my-url" data-largesrc="images/1.jpg" data-title="Title" data-descript ...

javascriptjqueryhtml

Utilizing CSS to place an image on top of the upcoming <div> container

My goal is to create a layout similar to the one displayed in the linked image. https://i.stack.imgur.com/7DSE9.jpg Currently, I am using Bootstrap 3 and my HTML markup looks like this: <body class="gray-bg"> <section class="white-bg"> <d ...

htmlcsslayoutposition

Encountering issues with the Justify props in Material UI grid – how to troubleshoot and solve the problem

Can someone help me troubleshoot why justify is not working in this code block? <Grid container direction='column' alignItems='center' justify='center' spacing='1'> <Grid item xs={12}> <Ty ...

javascriptflexboxmaterial-uigridcontainers

Issue with hiding div using jQuery's length option

I'm currently using Drupal 7.0 along with the Galleria Javascript Image Gallery in fullscreen theme. My theme includes two navigation buttons, and here is the CSS code for them: .galleria-image-nav { height: 159px; opacity: 0.8; position: fixed ...

jquerycssdrupal

Utilizing External Libraries Added Through <script> Tags in React

My goal is to develop a Facebook Instant HTML5 application in React. Following their Quick Start guide, Facebook requires the installation of their SDK using a script tag: <script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></scrip ...

javascripthtmlreactjstypescriptfacebook-instant-games

Transferring data from an Excel spreadsheet into a structured table

I am interested in transferring specific columns of data from an excel sheet to an HTML table. My goal is to populate the table based on certain conditions rather than statically inputting fixed cells. For instance, if my excel sheet has columns for Name ...

pythonjqueryhtmlexcelhtml-table

Looping through a nested for loop within an HTML table

I am currently working on generating a dynamic table using Lists of varying sizes. My first list is a List of Cars List<Car>. I have successfully placed the names of different car companies in the header. Next, I have a List<List<CarSales>& ...

javascripthtmlthymeleaf

What makes the nav class different from the navbar class in Bootstrap?

Recently, I delved into learning about bootstrap and web development. To my surprise, I stumbled upon the nav and navbar classes in bootstrap 4. I'm curious to know what sets them apart from each other and when it's best to use one over the other ...

htmlcsstwitter-bootstrapnavbarnav

Ways to efficiently convert HTML form data into JSON format

Currently, I am in the process of developing an ecommerce platform. As part of this project, I have created a billing form to gather essential information such as email addresses and physical addresses from users. The intention behind collecting this data ...

htmlcssdjangowebe-commerce

The placeholder attribute for input types does not display consistently across all browsers

I am experiencing an issue with the placeholder text in my input field. <input type="text" name='linkLabel{{index}}' autocomplete="off" class="input-large tight-form-url last remove-cross" required="required" placeholder="{{'linkLabel&ap ...

javascripthtmlcss

Adjust the baseline of the text within the <li> element by moving it 2 pixels upwards

My webpage menu is set up with inline lis within a ul. Each li has a colored border and contains an a element. I want to change the color of the text inside the a element and move it 2 pixels up when hovering over it without affecting the li border. How ...

htmlcssmenuhtml-listsmousehover