Question 246037 in Html Question posted in
Some basic documentation can be found here.

Html – Why is my svg crossing the edge of it's parent div?

I have 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;
}

Below is my js fiddle, I am not sure why my svg goes outside the container and doesn’t display fully. Below is the link of the code:

Link to fiddle

How can I fix this? not sure what I am doing wrong

What it should look like:

enter image description here

I tried to remove padding in the LABEL_MAIN but that didn’t help, I am not sure if display: inline-flex is the issue

Tags:

2

Answers


  1. 0

    It’s because you are making the .LABEL_BOX bigger than the container so in order to solve it you have two ways.
    First Option: remove the width of the.LABEL_BOX and then give the.LABEL_MAIN the property justify-content: space-between;
    Second Option do the math and make the .LABEL_MAIN fit with the SVG width + the gap or just decrease the gap to 18px and call it a day.

    Login or Signup to reply.
  2. 0

    you provided the width: 247px to the main div in LABEL_MAIN CSS class and then you applied the same width to the first child div in OP_LABEL CSS class. So the first child takes complete parent div width and SVG doesn’t have enough space to show.

    You can fix this problem by using one of the solutions:

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

    Solution-2. Add justify-content: space-between CSS property inside
    LABEL_MAIN CSS class and remove width: 247px CSS property from
    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
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search