Flexible Box Model Parent with Children Having Full Height

I'm currently developing an application featuring a custom calendar that utilizes Flexbox for styling, with all the date logic being managed by React.

While the calendar is working perfectly fine, I've encountered a styling issue that has me stumped.

My goal is to have the week div overflow when numerous events are added in a week, displaying a scrollbar to view all events. However, I'm facing a height problem with the day divs as there's no fixed height on the parent (week div) due to using flexbox with flex: 1; to fill space. How can I ensure the children (day divs) utilize the entire height of the overflowing parent (week div)?

I am looking for a CSS-only solution that is compatible across different browsers.

See a Sample CodePen Here: https://codepen.io/anon/pen/jLQyxX?editors=0100

HTML:

<div class="calendar">
  <div class="week">
    <div class="day">6</div>
    <div class="day">7</div>
    <div class="day">8</div>
    <div class="day">
      <div>This</div>
      <div>Border</div>
      <div>Doesn't</div>
      <div>Scale</div>
     ...
   </div>
    <div class="day">10</div> 
  </div>
</div>

CSS:

body {
  display: flex;
  flex: 1;
  padding: 0;
  margin: 0;
  height: 100vh;
}

.calendar {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 1px solid black;
  border-bottom: none;
  margin: 15px;
}

.week {
  display: flex;
  flex: 1;
  overflow: auto;
  border-bottom: 1px solid black;
}

.day {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 10px;
  outline: 1px dotted red;
}
htmlcssflexbox

Answer №1

One potential fix could involve inserting a wrap element between the week and day.
This solution works on Chrome, Firefox, and Edge, but there are compatibility issues with Internet Explorer. Unfortunately, I don't have access to Safari for testing.

Updated version on CodePen

Try running it in the Stack Snippet below:

body {
  padding: 0;
  margin: 0;
  display: flex;
}

.calendar {
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  border-bottom: none;
  margin: 15px;
  height: calc(100vh - 30px);
  display: flex;
  flex-direction: column;
}

.week {
  flex: 1;
  min-height: 20%;
  overflow: auto;
  border-bottom: 1px solid black;
  box-sizing: border-box;
}

.week .wrap {
  display: flex;
  min-height: 100%;
}

.day {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 10px;
  outline: 1px dotted red;
}

.week:nth-child(even) .day {
  background: lightgray
}
<div class="calendar">
  <div class="week">
    <div class="wrap">
    <div class="day">1</div>
    <div class="day">2</div>
    <div class="day">3</div>
    <div class="day">4</div>
    <div class="day">5</div> 
      </div>
  </div>
  <div class="week">
    <div class="wrap">
    <div class="day">6</div>
    <div class="day">7</div>
    <div class="day">8</div>
    <div class="day">
      <div>9</div>
      <div>&nbsp;</div>
      <div>This</div>
      <div>Border</div>
      <div>Doesn't</div>
      <div>Scale</div>
      <div>Correctly</div>
      <div>(Scroll Down)</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
    </div>
    <div class="day">10</div> 
    </div>
  </div>
  <div class="week">
    <div class="wrap">
    <div class="day">11</div>
    <div class="day">12</div>
    <div class="day">13</div>
    <div class="day">14</div>
    <div class="day">15</div> 
  </div>
  </div>
  <div class="week">
    <div class="wrap">
    <div class="day">16</div>
    <div class="day">17</div>
    <div class="day">18</div>
    <div class="day">19</div>
    <div class="day">20</div> 
  </div>
  </div>
  <div class="week">
    <div class="wrap">
    <div class="day">21</div>
    <div class="day">22</div>
    <div class="day">23</div>
    <div class="day">24</div>
    <div class="day">25</div> 
  </div>
  </div>
</div>

If each day in your main schedule needs to occupy an equal amount of space (using flex: 1 to fill any leftover space), another approach is to utilize absolute positioning for the week and day, then make day a flex container to manage its contents effectively.

Answer №2

To optimize the layout, consider transferring the overflow: auto style property from the .week class to the .day class.

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

Update the content retrieved through ajax periodically

Looking to set up a periodic update for this ajax fetch function, say every 10 seconds. I've tried a few approaches but none seem to work as expected. That's why I'm reaching out here for help. So, any idea how I can refresh the content ev ...

phpjqueryhtmlajax

Learn the process of dynamically expanding a specific Bootstrap menu item using jQuery!

To create a left vertical (sidebar) navigation menu, I will be referencing the "Example" located at https://getbootstrap.com/docs/5.0/components/accordion/. Assuming there are three HTML buttons: <button onclick="myFunction1()">Button 1< ...

htmljquerycssbootstrap-5

Filling HTML5 Datepicker Using Information from a Model

Currently, I am in the process of developing a basic scheduling application for a project. To simplify the task of selecting start and end times/dates for our events, we have included a simple DateTime picker in the source code: <input type="datetime-l ...

javascriptasp.net-mvchtmlrazor

Coldfusion: The Troubles of an Empty Link href="#" Error

For my CFWheels Coldfusion project, I have been utilizing Adobe Coldfusion Builder 3. In Coldfusion, when you want to output a variable, you typically do something like this: #variable_name# However, I am interested in incorporating an empty link into m ...

javascripthtmlcoldfusionescaping

I'm experiencing issues with my code involving HTML, CSS, and jQuery

Recently, I started learning about jQuery and came across a tutorial on creating a sticky nav bar. However, something went wrong during the implementation and now I don't know how to fix it! In my Script file, I have written code that should run on l ...

javascriptjqueryhtmlcss

CSS button with folded corner illusion and dynamic transitions

I have been using the code provided below to create a folded corner effect on a button, but I am having trouble with the white background that appears in the upper left corner of the button. Is there a class I can use to make this transparent so that the y ...

htmlcss

Dynamically Loading External JavaScript Files Depending on User Input

Looking for guidance on how to dynamically load a single javascript file out of several options based on user input in an HTML code. Any suggestions on how to achieve this task? Thank you! ...

javascripthtml

Utilizing HTML5 data attributes to store intricate JSON objects and manipulate them using JavaScript

Recently, I encountered a unique challenge that I set for myself... I am currently in the process of developing an advanced ajax content loader plugin that comes with an array of options and callbacks. In order to streamline the initialization process and ...

javascriptjsonhtml

Collapsed Bootstrap 5 select drop-down featuring the multiple attribute

I am facing a challenge with using the select element along with the 'multiple' attribute. My aim is to have it collapsed by default and expand only when the user clicks on it. Unfortunately, Bootstrap 5 no longer supports the multiselect feature ...

jquerycssbootstrap-5bootstrap-selectbootstrap-selectpicker

Looking for ways to increase the speed of rendering in the basic window system using HTML5 and CSS3?

Check out these code samples: http://jsfiddle.net/5r3Eh/10/show/ and http://jsfiddle.net/5r3Eh/18/. I've noticed they are running slow on Chrome 12, slightly improved on 13. Is there a way to achieve drag-and-drop functionality for windows without us ...

javascriptjqueryhtmlcssperformance

Implementing event handling with .On() in Jquery following .Off()

I need assistance with my responsive navigation bar. I am having trouble with the jQuery code to disable hover events if the width is less than or equal to 768px and enable it for desktop screens. $(window).on('load resize', function (e) { v ...

javascriptjquerycssunbind

Tips for implementing draggable elements using JavaScript and React hooks, creating a more interactive user experience

I'm working on a project where I need to incorporate draggable divs, each corresponding to an image in an array of images, into a container. The current implementation seems to function properly, but there's an issue - the dragging action only w ...

javascripthtmlreactjsdraggable

Steps to customize the error icon in Material-UI Stepper

I am faced with the task of changing the error icon of a default MUI Stepper, which currently looks like this: https://i.stack.imgur.com/jZlOn.png However, I need it to display the following icon instead: https://i.stack.imgur.com/uTGSw.png Although I am ...

cssreactjsmaterial-uistepper

Tips for adding a border to an element when hovered over

I am looking to achieve a hover effect that displays a border around an element without actually adding the border to the element itself, as shown in this image: https://i.sstatic.net/iFpCA.png The challenge I'm facing is that I want to allow users ...

javascripthtmlcss

"Fetching a textbox value and passing it into an anchor tag query string: a step-by-step

What is the best way to extract a value from an "asp:TextBox" and insert it into an anchor tag? The asp:TextBox I am working with is labeled txtTaskName. <a href='EmailManager.aspx?<%# Eval(txtTaskName.Text) %>' runat="server">Add E ...

asp.nethtmlc#-4.0visual-studio-2012

Using Selenium and Python to scrape text from a continuously refreshing webpage after each scroll

Currently, I am utilizing Selenium/python to automatically scroll down a social media platform and extract posts. At the moment, I am gathering all the text in one go after scrolling a set number of times (see code below), but my objective is to only gathe ...

javascriptpythoncssseleniumselenium-webdriver

Using jQuery to smoothly scroll horizontally to a specific div element

In my project, I aspire to create a layout similar to the BBC website: with a side scroll from section to section. Here is my code and the issue I am encountering: jsFiddle: http://jsfiddle.net/neal_fletcher/kzQFQ/2/ HTML: <div class="wrapper"> ...

javascriptjquerycsshtml

Avoid having Masonry load all divs simultaneously

I have experience using jQuery Masonry on Tumblr, but now I want to incorporate it into my portfolio website for displaying my photography. However, I'm struggling to find a solution that allows sets of images to load in as the user scrolls to the bot ...

javascriptphpjquerycssjquery-masonry

Is there a workaround for lack of border radius support in IE8 when css3PIE is not functioning

I've come across numerous versions of this question, but none have been successful for me. I'm attempting to achieve rounded corners in IE8 similar to what I see in Firefox and Chrome. Below is my CSS code after integrating css3PIE: border-top- ...

htmlinternet-explorer-8csscss3pie

Expand the width of the drop-down menu items

Having trouble with my submenu dropdown menu... I want to increase the width of my submenu without affecting the main menu, but they seem to be interconnected and I need them to function independently. .fancyNav{ /* Styles for the UL element */ ...

css