What could be causing my SVG to overlap with its parent div?

I am currently working with the following HTML and CSS:

<div class="LABEL_MAIN">
    <div class="LABEL_BOX">
        <div class="OP_LABEL">
            bro
        </div>                   
    </div>
<div class="outer-plus">
    <div class="inner-plus">
                                <svg xmlns="http://www.w3.org/2000/svg" width="10" 
                                    height="10" viewBox="0 0 10 10" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" 
                                      d="M5 0.5C5.25642 0.5 5.46775 0.69302 5.49664 
                                      0.941689L5.5 1V4.5H9C9.27614 4.5 9.5 4.72386 
                                      9.5 5C9.5 5.25642 9.30698 5.46775 9.05831 
                                      5.49664L9 5.5H5.5V9C5.5 9.27614 5.27614 9.5 5 
                                      9.5C4.74358 9.5 4.53225 9.30698 4.50336 
                                      9.05831L4.5 9V5.5H1C0.723858 5.5 0.5 5.27614 
                                      0.5 5C0.5 4.74358 0.69302 4.53225 0.941689 
                                      4.50336L1 4.5H4.5V1C4.5 0.723858 4.72386 0.5 5 
                                      0.5Z" fill="black"/>
                                </svg>
     </div>
    </div>
</div>

CSS:

.LABEL_MAIN{
    display: flex;
    width: 247px;
    align-items: center;
    gap: 23px;
    border-bottom: 1px gray solid;
    padding-bottom: 8px;
}

.LABEL_MAIN:last-child{
    border-bottom: none;
}

.LABEL_BOX{
    width: 247px; 
    justify-content: flex-start; 
    padding-top: 8px;
    padding-bottom: 8px;
    align-items: center; 
    gap: 23px; 
    display: inline-flex
}

.OP_LABEL{
    width: 224px; 
    color: green; 
    font-size: 14px; 
    font-family: Bogle;
    font-weight: 400; 
    text-decoration: underline; 
    line-height: 20px; 
    word-wrap: break-word
}

.outer-plus{
    padding: 8px;
    border-radius: 100px;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    display: inline-flex;
}

.inner-plus{
    padding: 3.50px;
    justify-content: flex-start; 
    align-items: flex-start; 
    display: inline-flex;
}


.plus{
    width: 9px; 
    height: 9px;
}

I have created a js fiddle to demonstrate the issue I am facing with the SVG not displaying fully within its container. Here is the link to the code:

Link to fiddle

Could you provide some guidance on how to correct this issue? I am unsure if the problem lies in the padding of LABEL_MAIN or the use of display: inline-flex.

This is what the result should resemble:

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

I attempted removing padding in the LABEL_MAIN section, but it did not resolve the issue. I am uncertain whether using display: inline-flex is causing the problem.

htmlcsssvg

Answer №1

Initially, you assigned a width: 247px to the main div within the LABEL_MAIN CSS class. Subsequently, you applied the same width to the first child div in the OP_LABEL CSS class. As a result, the first child div occupies the entire width of the parent div, leaving insufficient space for the SVG element to display adequately.

To resolve this issue, consider implementing one of the following solutions:

Solution-1: Adjust the value of width from 247px to 240px in the OP_LABEL CSS class.

Solution-2: Introduce the justify-content: space-between CSS property within the LABEL_MAIN CSS class and eliminate the width: 247px CSS property from the OP_LABEL CSS class.

.LABEL_MAIN{
    display: flex;
    width: 247px;
    align-items: center;
    gap: 23px;
    border-bottom: 1px gray solid;
    padding-bottom: 8px;
    justify-content: space-between;
}

.OP_LABEL{
    color: green; 
    font-size: 14px; 
    font-family: Bogle;
    font-weight: 400; 
    text-decoration: underline; 
    line-height: 20px; 
    word-wrap: break-word
}

Answer №2

The reason for the issue is that you have enlarged the .LABEL_BOX beyond the container size. To resolve this, there are two possible solutions.

Option One: Remove the width from .LABEL_BOX and apply the property justify-content: space-between; to .LABEL_MAIN.

Option Two: Perform some calculations to adjust the size of .LABEL_MAIN to accommodate the SVG width + gap, or simply reduce the gap to 18px and consider the problem solved.

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

Attempting to align one canvas with another causes the canvas to go haywire

Currently, I have two canvases set up in my game. The first canvas (rect1) moves randomly on the board while the second canvas (zombie) is supposed to follow rect1, but it seems to be moving all over the place instead of following correctly. Below is the c ...

javascripthtmlcanvas

Unable to conceal adjacent element when z-index is set as 1

I encountered an issue where a modal is overlapping another element, and the close button of the underlying element has a z-index of 1. Despite creating a new modal with its own close button, the original close button remains visible on top. I attempted t ...

javascripthtmlcssreactjs

Eliminate any attributes related to images (such as alt text, classes, or styles) from the image tag

I operate a website where individuals are able to directly copy and paste content into my platform, which is then stored in my database. Initially, I only accounted for users utilizing my image insertion tool, which saves images as basic HTML image tags: ...

phphtmlcssimagestr-replace

Manipulate component properties using CSS hover in React with Material-UI

I am attempting to modify the noWrap property of a Typography element when hovering over it. I have defined a custom CSS class for the parent element and the hover functionality is working correctly. However, I am unsure how to adjust the noWrap property u ...

javascriptcssreactjsmaterial-ui

Exploring the possibilities in Bootstrap 5.3: Modifying the maximum width of an individual tooltip

Is there a way to modify the maximum width of a specific Bootstrap Tooltip without affecting the others? I do not utilize Sass or SCSS, and have attempted various methods outlined in the documentation: tooltip-max-width="300px" bs-tooltip-max-wid ...

javascriptcssbootstrap-5

Customizing the appearance of individual columns in the Material-UI DataGrid

My goal is to center an IconButton within a DataGrid table, all of which are MUI components. Despite reading the documentation and trying various methods, I haven't achieved the desired result yet. In my latest attempt, I implemented the following: G ...

cssreactjsmaterial-uimui-datatable

Switch up the webpage's font using a dropdown selection box

I'm interested in adding a drop-down box to my webpage that allows users to change the font of the site when they click on it. I attempted the code below, but it didn't seem to work. Any suggestions? Regards, Sam CSS .font1 p { font-family: " ...

htmlcssangularjs

"Learn how to showcase a picture in full-screen mode when the webpage is opened

I recently came across a script on Stack Overflow that allows me to select an image at random from an array. The script can be found here: Script to display an image selected at random from an array on page load However, I want to take this concept furthe ...

javascriptjqueryhtmlcss

Differences between using Node.js with Express and EJS on Ubuntu and Raspbian systems

I've set out to create a small calendar using Express and EJS on Node.js. Everything was running smoothly on my laptop (Ubuntu). However, when I transferred the project to my Raspberry Pi to host the web server on my home network, an error was throw ...

htmlnode.jsexpressraspberry-piejs

Exploring the implementation of a many-to-many relationship on a webpage

In the process of creating a library database and dealing with a many-to-many relationship between books and writers, I am contemplating how best to design the user interface for managing this information. When editing a book entry, selecting one or more ...

htmldatabaseuser-interfacemany-to-many

Utilizing jQuery Methods within Node.js

Recently delved into the world of node.js and created multiple pages (such as login, signup, blog, etc). If I desire an effect in which: 1. Hovering over the "News" button triggers a slider to appear downwards, To make adjustments to an image within ...

javascriptjqueryhtmlcssnode.js

Layering digital sheets of paper and rearranging them with the help of CSS

I want to create a visual representation of a stack of paper sheets as a metaphor. The idea is to neatly stack the sheets on top of each other, with only the header of each sheet visible and the rest of the content covered. !-------------- | Sheet 1 +--- ...

jquerycss

Is it possible to maintain HTML, JS, and CSS files as separate entities when developing Vue.js components, similar to how it is

Is it possible to maintain separate HTML, JS, and CSS files while creating Vue.js components? I recently read the "Why Vue.js doesn't support templateURL" article which discusses this topic. "Proper modularization is a necessity if you want to bu ...

javascripthtmlvue.jsvuejs2vue-component

Is there a way to identify the breakpoints of a header that has a changing number of menus?

I am currently designing a customizable header for a web application, where the admin has the ability to add or remove menus as desired. For instance: https://i.sstatic.net/37IeG.png Or https://i.sstatic.net/zbIPd.png The breakpoints for these two navigat ...

javascripthtmlcss

The symbol '★' represents the '★' content in CSS

Here is the CSS code I am using: .rating:not(:checked) > label:before { content: '★'; } However, when it is displayed on the screen, instead of seeing a ★, I see â˜. It's strange because if I use Firebug and manually change the ...

css

blurring out of an input field and a division element

I am currently working on creating a dropdown suggestion box that hides when the input field and dropdown box are no longer in focus. My HTML code: <input type="text" id="user_address"> <div id="user_address_sg">SUGGESTION</div> <di ...

javascriptjqueryhtmlcss

Create dynamic cells for CSS grid using JavaScript

I have been manually generating grid cells in a specific pattern by copying and adjusting <div> elements. Although this method works, I am interested in creating an algorithm that can automatically generate the desired layout. The left box in the exa ...

javascripthtmlcssalgorithm

Can media queries styles be applied to a window of random size using JavaScript?

Can JavaScript be used to apply media queries style based on random window sizes? I have 5 buttons that I want to switch styles for using JavaScript according to the media queries defined in my CSS stylesheet. Is there a method to achieve this? ...

javascripthtmlcssmedia-queries

Creating a static Top Bar that remains unaffected by page refreshing using Ajax or any other method can be achieved by implementing JavaScript and CSS

I've designed a sleek top bar for my upcoming website project. Below is the CSS code snippet for creating this clean div bar: .topbar { display:block; width:100%; height:40px; background-color:#f5f5f5; } I'm looking to incorporate a simple .SWF ...

javascripthtmlcssajax

Using jQuery to trigger a function after a user has inputted a YouTube link and initiated an Ajax request

This snippet of HTML is used to extract the URL value. <p align="center">Youtube video</p> <div class="row collapse"> <div class="small-3 large-2 columns"> <span class="prefix">http://</span> </div ...

phpjqueryhtmlajax