Preventing flexbox containers from being affected by overflow elements

I am looking to implement overflow: scroll within a flexbox layout.

I am unsure of how to link an image directly from my Google Drive, so I have provided the URL instead: https://drive.google.com/open?id=17uM5twoprxmbo5xQ37kgeTaMwn7FGSu_

When using the overflow: scroll component in a flexbox, I noticed that it causes the container height to increase.

Is there a way to prevent this issue?

Below is the bootstrap code snippet:

<div class="row display-flex">
  <div class="col" style="padding: 0; max-width: 35rem; height: auto">
    <b-img fluid" src="image" />
  </div>
  <div class="col" style="max-width: 18rem;  background: white;">
   <ul style="list-style: none; margin:0; padding:0;">
     <li><b-img :src="post.owner.thumbnail" rounded="circle" style="width: 24px; height: 24px;" /></li>
     <li>{{ post.owner.username }}</li>
     <li>{{ post.title }}</li>
   </ul>
   <div class="comment asd" style="overflow-y: scroll;">
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
       ........

.row.display-flex {
    display: flex;
    flex-wrap: wrap;
  }
.display-flex .col {
    display: flex;
    flex-direction: column;
}

Thank you!

cssvue.jsbootstrap-4flexboxoverflow

Answer №1

If you need to style your elements, you can utilize the following Bootstrap classes:

  • d-flex is equivalent to display:flex

  • flex-wrap is equivalent to flex-wrap:wrap

  • flex-column is equivalent to flex-direction:column

  • col behaves like flex-grow:1

  • h-100 is equivalent to height:100%

  • overflow-auto is equivalent to overflow:auto

You can find more classes in the Bootstrap documentation here

Here is an example of how you can use these classes in your code:

/* This is a sample for demonstration purposes */

.fluid {max-height:90vh;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row d-flex flex-wrap">
  <div class="col" style="padding: 0; max-width: 35rem; height: auto">
    <img class="fluid" src="http://dummyimage.com/445x555" />
  </div>
  
  <div class="col d-flex flex-column" style="max-width: 18rem;  background: white;">
   <ul style="list-style: none; margin:0; padding:0;">
     <li><b-img :src="post.owner.thumbnail" rounded="circle" style="width: 24px; height: 24px;" /></li>
     <li>{{ post.owner.username }}</li>
            <li>{{ post.title }}</li>
   </ul>
   <div class="comment asd col h-100" style="overflow-y: scroll;">
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah ..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah ..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah ..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah ..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    </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

<ul><li>issue with indentation

Is there a way to eliminate the indent from my unordered list? While inspecting the element, I noticed what appears to be padding between the width of the box and the content. However, setting padding to 0px and margin to 0px doesn't seem to work as t ...

htmlcss

Is there a way to achieve a similar outcome on my site?

Recently, I noticed a mouse-hover effect on two websites and found it quite appealing. https://i.sstatic.net/Ly0gP.png https://i.sstatic.net/oDe1i.png This is the specific effect that caught my attention. Can anyone provide me with insight on how to impl ...

javascriptphpjqueryhtmlcss

CSS ratings bar styling

Looking to create a unique ratings bar for my website, I have some questions that need answering. Take a look at the codepen link to see what I've come up with so far. My main query is about incorporating two different colors for Likes (green) and Di ...

cssprogress-barrating

What is the best way to insert horizontal padding into each line of a single sentence that is wrapped on multiple lines

Below is the code snippet I am working with: <div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div> Here is a screenshot of how it currently appears: I am looking for a way to add paddi ...

csshtml

CSS allows for the creation of fixed bars that remain at the top of the

I am looking to create a fixed bar that is off-center with a scrolling background. The code I have so far either places the bar on the surface but fixes it to the background, or it positions the bar beneath the image and fixes it to the window - neither ...

htmlcsscss-position

Revise the cascading style sheets for HTML content loaded via AJAX

I have a situation where I am dynamically loading HTML content using AJAX with JQuery. After the content is loaded, I am triggering a click event on specific elements within the newly added HTML. However, I am encountering an issue when trying to set the ...

htmlcssajaxdynamic

A guide to successfully transferring dynamic props across routes in Vue 3

One way to send static props through <router-link> is shown below: parent-component: <router-link :to="{name: 'child-component'}"></router-link> child-component: <template> <h1>{{ test }}</h1> < ...

vue.jsroutesvue-routervuejs3vue-props

Dealing with full-width elements on mobile devices

I've got a pretty basic question here but can't seem to find a straightforward answer. I'm using Bootstrap to style a website and struggling with making it mobile-responsive. Following the given answer, I used this code to show a button ne ...

htmlcssclassselectbootstrap-4

Ways to display a specific HTML element or tag depending on the given prop in VueJs

When working with Vue.js, it's important to remember that a <template> can only have one root element. But what should be done if you need to render different html elements based on a prop? For instance, let's say we have a <heading> ...

javascriptvue.js

Challenge with the continuity of my Html/CSS coding

I am currently expanding my knowledge in web development with a focus on CSS. While I am familiar with JS and HTML, CSS is proving to be more challenging for me. I have been attempting to create a webpage using Bootstrap, but I have hit a roadblock with th ...

jqueryhtmlcsstwitter-bootstrap

Is it possible to utilize nth-child() without recursion?

Can the CSS selector parent child:nth-child() be used to target only children? The HTML code is as follows: <body> <div>div 1</div> <div> div 2 <div>div 2.1</div> <div>div 2.2</ ...

htmlcss

Having trouble executing a Vue project as I encountered an error stating: "Module not found: '@vue/cli-plugin-babel'". To fix this, I proceeded to install the necessary dependencies by running the command: npm install

Error: The module '@vue/cli-plugin-babel' could not be found. Require stack: C:\Users\HP\AppData\Roaming\npm\node_modules@vue\cli-service\lib\Service.js C:\Users\HP\AppData\Roaming ...

node.jsvue.jsnpm

Tips for getting a sticky table header and including a limited number of columns, each with checkboxes or input fields

Encountering issues while trying to implement functionality with a jQuery library. One specific problem is the inability to interact with checkboxes on sticky columns, as well as difficulties clicking and typing in text fields. I am utilizing the jQuery S ...

javascriptjqueryhtmlcss

positioning newly generated dropped elements within the DOM structure dynamically

Hello everyone, I have a query related to drag and drop functionality. I am currently working on an application that allows users to create websites using only drag and drop features. I am facing a challenge in implementing a feature where users can drop e ...

javascriptjquerycssangularjsdrag-and-drop

What is the best way to protect the information returned by my controller when creating a CRUD application in Laravel and vue.js?

Currently, I have developed a CRUD application in Laravel that utilizes Vue.js and Axios. The CRUD functionalities have been successfully implemented using routes that fetch data from my controller. However, one concern arises when exposing these routes pu ...

mysqllaravelvue.jsaxios

How can you turn a SWFObject into a clickable link?

Is there a way to create a clickable link using a .swf flash file with swfObject? I want the entire video to be clickable, but I'm struggling to figure out how to do it. If you take a look at this example here: , you'll see that they were able ...

htmlcssflashhyperlinkswfobject

The fixed div with the z-index at the top isn't functioning properly

I need a div that remains fixed at the top of my page and overlaps any other elements on the page, similar to the blue search bar on Facebook. Currently, when I scroll down, the table ends up above the div, but I want it to be below the div instead. Here i ...

htmlcss

A distinct vertical line separating two buttons

I'm currently working on an Angular 2 app using Angular material. I have two buttons labeled "sign in" and "sign up", and I'm trying to add a vertical line between them. Despite looking at various examples online, I haven't been successful i ...

htmlcss

The size of the popup does not align properly with the content within it

After creating an extension for Chrome, I specified the dimensions of the popup to be 600 x 300 px. Everything was working perfectly until Chrome updated to version 27. As shown in the screenshot, I set the width and height using CSS, but there is still a ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

Chrome scrolling causing Webkit mask to shift position

I have successfully created a rounded Google map after much effort. Here is the link to the JSFiddle: http://jsfiddle.net/DZTvR/13/ However, I encountered an issue in Chrome where the mask remains static while scrolling, unlike other browsers like FF, Op ...

htmlcssgoogle-chromewebkit