Using Flexbox CSS to Expand a Box According to its Content Size, Without Impacting Adjacent Rows

Is there a way to make the bottom-most row (highlighted in yellow) expand downward to fill available space?

Check out this link for reference: https://jsfiddle.net/darrengates/oucvnfke/

I initially thought using:

flex: auto;

would solve the issue. While I'm open to .js solutions, a pure CSS solution would be ideal without changing the HTML markup.

The concept is to have a fixed top container (light green), and a bottom container that can expand to fit its content, even if it's divided into 2 columns.

javascriptjqueryhtmlcssflexbox

Answer №1

Try using flex: 1 0 100% on the .row class instead.

.wrapper-row {
  min-height: 100px;
}

.row {
  display: flex;
  flex: 1 0 100%;
  flex-direction: row;
}

.col {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
}

/* ensure top row is always 50px, irrespective of content below */
.top-row {
  background-color: lightgreen;
  flex-basis: 50px;
}

.bottom-row {
  background-color: yellow;
  flex: auto;
}
<div class="container">
  <div class="row wrapper-row">
    <div class="col">
      <div class="row top-row">
        <div class="col">
          <div class="content-wrapper">
            <div class="content"></div>
          </div>
        </div>
      </div>
      <div class="row bottom-row">
        <div class="col">
          <div class="row">
            <div class="col col-6 bottom-left-col">
              <div class="content-wrapper">
                <div class="content"></div>
              </div>
            </div>
            <div class="col col-6 bottom-right-col">
              <div class="content-wrapper">
                <div class="content">
                  This text should be fully contained within the yellow area due to flex: auto. Why isn't it?
                  <br />
                  <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum tortor in felis porttitor, at elementum massa vestibulum. Suspendisse lobortis tempor tellus.
                  <br />
                  <br />Donec aliquam laoreet tortor ut vulputate. Proin est ipsum, vehicula id lacus pharetra, dictum fringilla magna. Integer mollis nunc quis leo porttitor congue. Nam a nulla eget ipsum congue dapibus. Proin in elit iaculis tortor pretium
                  ullamcorper. Etiam cursus consequat vehicula. Suspendisse fermentum ante eu sodales mollis.

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </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

Obtain all values from multiple Selectize instances sharing the same class using JavaScript

I have an HTML page containing multiple selects (created with selectize) all sharing the same class "idPeople". When I click the "search" button, I need to retrieve all the values from these selects. However, in my JavaScript file using ...

jqueryselectize.js

What methods are available to create a transition animation for an HTML 5 banner on iOS devices?

I need assistance with animating an HTML5 banner to transition vertically onto the screen in my app demo. After a prompt that triggers a server callback, the banner should smoothly move down from the top of the screen. The animation I am aiming for is simi ...

ioshtmlcsscss-transitionshtml5-animation

Creating vibrant squares using HTML and CSS

My objective is to incorporate 3 input options for selecting the color, size, and amount of cubes. The image below showcases my peer's final project, but unfortunately, he refused to share the code with me. We were given a basic template to begin with ...

javascripthtmlcss

Utilize Launchdarkly in React by incorporating it through a custom function instead of enclosing it within

Currently, I am adhering to the guidelines outlined by launchdarkly. Following the documentation, I utilized the following code snippet: import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk'; (async () => { const LDProvider = a ...

javascriptreactjsfeaturetogglelaunchdarkly

Receive a notification when the div element stops scrolling

I am attempting to replicate Android's expandable toolbar within an Angular component. My HTML code appears as follows: <div (scroll)="someScroll($event)"> <div class="toolbar"></div> <div class="body"></div> </d ...

javascripthtmlangularevents

Ways to stop click event on Header of a JQUERY DataTable

<script type="text/javascript"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https:code.jquery.com/jquery-3.5.1.js"></script> <script src="https:cdn.datatables.net/1 ...

jquerydatatables

Python code for clicking a button using Selenium

I'm having trouble closing popup windows in Selenium with Python. The button labeled "joyride-close-tip" is functioning correctly and closes the window, but the other two buttons are not working. What could be causing this issue? Even though I copied ...

pythonhtmlselenium-webdriverweb-scrapingpopup

Tips for getting free jqgrid to display frozen column borders in the search toolbar

If the actions column has a caption of "Activity" or custom settings and is frozen, the free jqgrid will not display column borders for this column in the search toolbar. Vertical lines do not appear in the search toolbar: Is there a way to resolve this ...

htmlcssjqgridfree-jqgrid

What is the best way to zoom in on an image and make it move off the screen as I scroll through my webpage?

I am working on a website design where I would like to implement an image zoom effect as the user scrolls down. Additionally, I want the image to move to either the left or right side of the screen as it goes out of view when scrolling to the bottom. While ...

javascriptjqueryhtmlcss

Choosing multiple values in the selectize plugin from the controller: A step-by-step guide

Need help with selecting multiple options I'm utilizing the following plugin: https://github.com/selectize/selectize.js/blob/master/docs/usage.md I have an object as displayed in the image below: https://i.stack.imgur.com/sQsKe.png This is my Client ...

javascriptarraysangularjsobjectselectize.js

Please provide both an image and text in addition to a progress bar by using the form to

I am working on a form that needs to store both images and text data in a database. <form action="processupload.php" method="post" enctype="multipart/form-data" id="UploadForm"> <input name="name" type="text" /> <input name="age" ty ...

javascriptphpjqueryajaxfile-upload

Modifying pagination numbers with Reactjs: A step-by-step guide

I am currently working on Reactjs (nextjs) and I have successfully integrated the "Nextjs" framework. The pagination is working fine, but the buttons are displaying as "1,2,3,20" instead of "1,2...20" (showing all numbers without using "..."). How can I mo ...

javascriptreactjsnext.js

Angular 12: Running ng test shows code coverage error - TypeError: Unable to access 'initialize' property as undefined

I encountered an error in the code coverage console: TypeError: Cannot read properties of undefined (reading 'initialize') I am trying to call a service method from the component.ts file The code in the component.ts file looks like: this.myAuth ...

javascriptangularrxjskarma-jasmine

Encountered an issue with locating the module 'webpack-cli/bin/config-yargs' while attempting to run webpack-dev

Encountering an error while trying to start the webpack dev server with the command provided below. Despite suggestions that it could be due to outdated webpack versions, I am confident that all components are up to date: [email protected] [email ...

javascriptreactjstypescriptwebpackwebpack-dev-server

What sets apart Angular's $http.post from jQuery's $.post?

What is the difference between Angular's $http.post and jQuery's $.post? $http.post() vs $.post() Does $http.post() internally use $.ajax from jQuery or does it create its own XMLHttpRequest? I am currently experiencing an issue with Angular&a ...

jqueryangularjs

Discovering the property name of an object in Angular using $watch

Is there a way to monitor an object for changes in any of its properties, and retrieve the name of the property that changed (excluding newValue and oldValue)? Can this be accomplished? ...

javascriptangularjs

JavaScript inserted into debug console by developer

Is there a method to troubleshoot code that has been added through the firefox developer console terminal? For example, I added document.onkeydown = function(event) { // code logic for checking keys pressed } If only I could determine which .js file t ...

javascriptweb-console

Utilizing JavaScript to enable a Bootstrap 5 dropdown menu to open on hover for desktop users and be clickable for mobile users

I am currently using Bootstrap 5 to design a website and I'm facing an issue with creating a navbar dropdown. On desktop, I want the dropdown to open on hover and redirect the user to a new page when clicked. However, on mobile devices, I only want th ...

javascripthtmlcssfrontendbootstrap-5

Leverage JSON data and implement it in JavaScript

In my PHP page, I have a JavaScript function that includes a JSON method for retrieving data from the database. The code snippet looks like this: $this->registerJsFile('/js/restaurant-reserve.js', ['depends' => [JqueryAsset::class ...

javascriptphpjsonyii2

Is it possible for XSS attacks to exploit the HREF attribute when used with jQuery?

Burp suite displaying an error message. The application seems to have a potential vulnerability related to DOM-based cross-site scripting. Data is retrieved from the location and passed to jQuery() using the following statement: jQuery(location). ...

javascriptjqueryxss