In next js, the component exceeds 100% overflow when padding is added

https://i.sstatic.net/W30tk.png

Hey there, I've been encountering some issues with next js and styled-components. I have a parent component (sc-hgRfpC lbMBdR) with a width of 400px, and swap-div-5 with a width: 100%. However, when I add padding: 12px, the swap-div-5 component doesn't fit properly into the 100% width, it overflows by 12px.

Does anyone know what might be causing this configuration issue with next js?

.swap-div-5{
    width: 100%;
    border: 1px solid ${colors.outline};
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

Parent{
    width: 100%;
    height: 100%;
    padding: 24px;
    box-shadow: ${boxShadow};
    border-radius: 8px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

Environment: https://www.npmjs.com/package/styled-components "next": "12.3.0"

Appreciate any help!

cssnext.jsstyled-components

Answer №1

When working with the CSS box model, it's important to note that the width and height you specify for an element only applies to the content box. Any border or padding added to the element will increase the overall size of the rendered box on the screen. This means that adjustments need to be made to accommodate for these additional factors when setting the width and height. For instance, if you have four boxes each with a width of 25%, adding padding or borders to any of them may prevent them from fitting on a single line within the parent container.

To address this issue, the box-sizing property can be utilized:

Setting the value to content-box will retain the default CSS box-sizing behavior. In this case, if an element's width is set to 100 pixels, the content box will be 100 pixels wide while any added border or padding will increase the final rendered width beyond 100px. Alternatively, using border-box instructs the browser to include border and padding when calculating the specified width and height of an element. Hence, if the width is set to 100 pixels, this measurement will encompass any added border or padding, adjusting the content box accordingly. This simplifies the process of sizing elements. The default styling for this behavior is applied to certain elements such as , , , and elements with specific types like radio, checkbox, reset, button, submit, color, or search.

To implement this solution, add the following code to .swap-div-5:

box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 12px;

Alternatively, set these global values:

*{
  box-sizing: border-box;
}

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

Guide on integrating Twitter Pixel with Next.js

Is there a way to incorporate a Twitter pixel into next.js similar to how the Facebook pixel is included? !function(e,t,n,s,u,a) {e.twq || ((s = e.twq = function () { s.exe ? s.exe.apply(s, arguments ...

reactjsnext.js

The dropdown menu displaying the img-dropdown-content with a display set to none is not functioning as anticipated

Attempting to hide drop down menu with img-dropdown-content but it's not working, possibly being overridden by another element - only using html and css I have experimented with visibility: hidden; both with and without !important as well as display: ...

htmlcss

Hide bootstrap card on smaller screens such as sm and md

Utilizing the Bootstrap 4.1 card component, I showcase categories within the right sidebar - check out a sample image of the card here: Card example image; When viewing on smaller screens, it's preferable to collapse this large card as shown in this ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

Differences between using tables and divs for form layouts

After searching online for examples of form implementations using DIVs, I noticed that most were simple one-column forms. However, my forms are more complex, like the one shown in this image: Although I can easily create these forms using tables, I encoun ...

htmlcssformstablelayout

What causes a div to shift to the right when the margin-left is set to auto?

I am curious to understand why setting the margin-left of the div with id="pink" to auto causes the div to move to the right side. Take a look at the image below: HTML <div id="aqua">aqua</div> <div id="yellow">yellow</div> & ...

csscss-position

Leveraging the power of nested selectors in Sass within your Next.js

What could be the issue at hand? I am interested in switching the theme or activating a menu, among other potential changes... https://i.sstatic.net/8A4Us.png ...

sassnext.js

Press and hold feature using CSS or JavaScript

When working with a jQuery draggable element, my objective is to change the cursor to a move cursor when clicking and holding the header. I have attempted using CSS active and focus properties, but so far no changes are taking place. ...

javascriptjquerycss

Having trouble implementing a circular progress bar with a custom Tailwind CSS library, the desired effect is not being achieved

I am on a mission to create a circular progress indicator. Recently, I stumbled upon the daisyui library and its component called radial progress - The documentation mentions that: "Radial progress requires the use of the --value CSS variable." ...

cssreactjstailwind-css

When using React <p> and Tailwind, the text overflow occurs in either the X or Y axis, despite specifying Y specifically

I am building a React frontend using TailwindCSS 2.2, and I have these two texts inside a <p> dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd ...

htmlcssreactjstailwind-css

Troubleshooting CSS issues in HTML pages

I created an HTML file but the CSS properties are not displaying correctly in the browser. I'm not sure where I made a mistake. Instead of using a separate CSS file, I have included it directly in the HTML file. <!DOCTYPE html> <html> &l ...

htmlcss

Choose the "toolbar-title" located within the shadow root of ion-title using CSS

Within Ionic, the ion-title component contains its content wrapped in an additional div inside the shadow-dom. This particular div is designated with the class .toolbar-title. How can I target this div using a SCSS selector to modify its overflow behavior? ...

cssangularionic-frameworksassshadow-dom

Exploring integration of NextJS with Vercel and Postgres database queries

https://i.sstatic.net/1K9D5A03.png I have included the necessary files to identify the main issue https://i.sstatic.net/5ZRyxqHO.png I am attempting to retrieve the userrole from the users table, but I am facing difficulties doing so through session afte ...

databasepostgresqlnext.jsvercel

What is the best way to eliminate the excess space below the footer on a vuejs page?

I am developing a footer using vuejs along with buefy. In my implementation of App.vue below, I am encountering a white margin under the footer. // App.vue <template> <div id="app"> <main-header /> <router-view/ ...

htmlcssvue.js

The bold horizontal line in HTML tables is a bit unusual and is caused by the border-collapse property

Edit 1: The strange issue appears to be related to the border-collapse property in CSS, as it can be resolved by using border-spacing: 0px. However, the question remains, why does border-collapse result in this behavior? It seems to be connected to scaling ...

htmlcss

What could be causing the lack of color change in my boxes even after confirming the prompt?

function changeColor() { if (confirm("Press a button!") == true) { if(this.style.backgroundColor == "white") this.style.backgroundColor = "yellow"; else if(this.style.backgroundColor == "yellow") this.style.backgroundColor = "red"; else i ...

javascripthtmlcss

Display the images adjacent to the usernames, followed by their respective levels underneath

<div class="players"> {{#each users}} {{#each usersInLobby}} <img src="/img/characters/{{skin}}.png" style="height: 85px; display:inline;"> <p>{{username}}{{level}}</p> {{/each}} {{/each}} ...

htmlcss

Show Struts2 error message on an HTML webpage

I have included error and message handling in my Struts2 action class using the addActionMessage and addActionError methods. I am now looking for code that will allow me to display these messages and errors on the HTML page. Is it feasible to do so? ...

htmlcssjspmodel-view-controllerstruts2

ways to halt a noise once an animation is complete

I don't have much experience with coding in general, but somehow I've made it this far. Now I'm stuck on the final piece of the puzzle. This is related to a Twitch alert that I'm setting up through 'Stream Elements'. The iss ...

javascripthtmljquerycsshtml5-video

What is the best way to show information entered into a textbox on a different webpage?

Looking for advice on how to collect data in a text box and display it on another page? I have included HTML code for both the announcement page (where the data is entered) and the archive page (where the data should be shown). Could someone guide me on ...

javascripthtmlcssformsfrontend

Challenges with formatting the <legend> tag and grid setup in bootstrap 4

My intention was for it to be displayed like this: But unfortunately, it is appearing like this instead: You can see that the word "fruit" is misaligned. I am currently using Bootstrap 4 alpha v6. Here is the code snippet: <fieldset class="form- ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-3