Content of one div exceeding the other div

Asked

Viewed 189 times

-2

In the form there are 3 Ivs, (divide view > div > divconteudoemail) as the example below:

<div id="divvisualizar" style="padding: 5px; border: 1px solid rgb(85, 85, 85); background-color: rgb(255, 255, 255); z-index: 100; top: 3%; left: 25%; position: absolute; width: 50%; box-shadow: rgb(20, 20, 20) 4px 4px 20px 0px; border-radius: 5px; height: 90%;">

    <div tipo="_div" style="padding: 3px; background-color: rgb(35, 75, 116);" class="dashed-black-border col-xs-12 col-sm-12 col-md-12 col-lg-12" id="_div4"><span id="span4" tipo="span" title="Fechar" onclick="span4_onclick(this)" style="float: right; color: white; font-weight: bold; cursor: pointer;;">X
    </span>
    </div>


     <div tipo="_div" style="background-color: rgb(240, 255, 255);" class="dashed-black-border col-xs-12 col-sm-12 col-md-12 col-lg-12" id="divcabecalho">
        <div tipo="_div" style="margin-top: 5px; padding: 0px;" class="dashed-black-border col-xs-12 col-sm-12 col-md-12 col-lg-12" id="_div5">
            <label tipo="_label" style="font-weight: bold; margin-top: 5px; padding: 5px;" class="control-label dashed-black-border col-xs-2 col-sm-2 col-md-2 col-lg-2" id="_label7">Mensagem :</label>
            <label tipo="_label" style="text-align: left; margin-top: 5px; padding: 5px;" class="control-label dashed-black-border col-xs-10 col-sm-10 col-md-10 col-lg-10" id="lblmensagem">Mensagem: Teste</label>
        </div>
        <div tipo="_div" style="margin-top: 5px; padding: 0px;" class="dashed-black-border col-xs-12 col-sm-12 col-md-12 col-lg-12" id="_div6">
            <label tipo="_label" style="font-weight: bold; margin-top: 5px; padding: 5px;" class="control-label dashed-black-border col-xs-2 col-sm-2 col-md-2 col-lg-2" id="_label8">Assunto :</label>
            <label tipo="_label" style="text-align: left; margin-top: 5px; padding: 5px;" class="control-label dashed-black-border col-xs-8 col-sm-8 col-md-8 col-lg-8" id="lblassunto">Assunto: Teste</label>
        </div>
        <div tipo="_div" style="margin-top: 5px; margin-bottom: 5px;" class="dashed-black-border col-xs-10 col-sm-10 col-md-10 col-lg-10" id="divanexos">
            <label tipo="_label" style="margin-top: 5px; margin-bottom: 5px; font-weight: bold;" class="control-label dashed-black-border col-xs-2 col-sm-2 col-md-2 col-lg-2" id="_label9">Anexos :
            </label>
            <div style='margin:3px; 0px; 0px; 5px; padding: 1%; cursor:pointer; border: 1px solid rgb(85, 85, 85); font-size: 11px; border-radius: 5px; display:inline-block;'>98852671.pdf
            </div>

        </div>
     </div>

     <div tipo="_div" style="margin-top: 5px; height: 100%; width: 100%;" class="dashed-black-border col-xs-12 col-sm-12 col-md-12 col-lg-12" id="div">

        <div tipo="_div" style="padding: 2% 6%; border: 1px solid rgb(85, 85, 85); background-color: rgb(255, 255, 255); box-shadow: rgb(20, 20, 20) 4px 4px 20px 0px; border-radius: 2px; height: 100%; width: 100%;  box-sizing: border-box; word-break: break-all; overflow-y: auto;" class="dashed-black-border col-xs-12 col-sm-12 col-md-12 col-lg-12" id="   divconteudoemail">TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE



                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETEVTESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE
                        FIM
        </div>

     </div>

 </div>

It turns out that the content that is inserted in the div "divconteudoemail" is dynamic, can be extensive or not, the problem is being when it has too much content, it bursts the size of the main div (divvisualization).

Example:

inserir a descrição da imagem aqui

I looked for some already open topic, tried using "white-space: pre-wrap;" but without success.

javascript html css

  • Have you tried using in css "word-wrap: break-word;" ?

  • I tried yes!! It didn’t work.

2 answers

6

Guy takes the overflow-x, and puts box-sizing: border-box to the padding do not add the total container width, use word-break: break-all; to break large words wider than the container. I added tb overflow-y: auto; for the text not to pop the container vertically, then it creates the vertical scrollbar automatically only if necessary.

<div id="divvisualizar" style="padding: 5px; border: 1px solid rgb(85, 85, 85); background-color: rgb(255, 255, 255); z-index: 100; top: 3%; left: 25%; position: absolute; width: 50%; box-shadow: rgb(20, 20, 20) 4px 4px 20px 0px; border-radius: 5px; height: 90%;">

    <div tipo="_div" style="margin-top: 5px; height: 100%; width: 100%;" class="dashed-black-border col-xs-12 col-sm-12 col-md-12 col-lg-12" id="div">

       <div tipo="_div" style="padding: 2% 6%; border: 1px solid rgb(85, 85, 85); background-color: rgb(255, 255, 255); box-shadow: rgb(20, 20, 20) 4px 4px 20px 0px; border-radius: 2px; height: 100%; width: 100%; box-sizing: border-box; word-break: break-all; overflow-y: auto;" class="dashed-black-border col-xs-12 col-sm-12 col-md-12 col-lg-12" id="   divconteudoemail">TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE



                           TESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETEVTESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETE

                           TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

       </div>

    </div>

</div>

  • Add the respective code snippet, there was the right word break, did not generate the scroll below, but the content of the "divconteudoemail" still exceeds the size of the main divide (divvisualize).

  • @Victorhenrique guy in the example here you can see that the content does not leak from inside the main div, you must have put some more code there or less in the question you asked, or else you are testing in a different condition than the one you asked... Just run my code here you will see that nothing "leaks" https://prnt.sc/rahh2q. see image

  • really i edited the code posted and it worked, probably the problem is the rest of the contents behind, I will edit the publication.

  • I edited the publication, already with its orietações.

  • @Victorhenrique my edit by putting an image does nothing, as you expect to solve with code seeing an image? you have to put the minimum code that to simulate your situation there

  • I happen to use a framework, I can not generate html/css of all content, I thought it would be possible with the elements that are being manipulated in question, where they have the code above. But thank you anyway.

  • With the code of your question, the answer is this.... You can test by placing a max-height in the div divconteudoemail: 100%, but I don’t think it will work... in the last case you can put a fixed value in PX height, type Heigh: 200px that will work

  • Yes I understand, I corrected my flaw, there was a content above that was generated by the framework, I did not bother to demonstrate in the example code, possibly difficult in the interpretation and resolution, the code was run and everything worked out. thank you.

Show 3 more comments

3


Use flexbox with column direction in div #div (which is the div where the div is #divconteudoemail) and add flex: 1 in the div #divconteudoemail in addition to other properties to adjust spacing. This way, the div will have automatic height, no matter what is inside the div #div. That’s because the property flex: 1 (or flex-grow: 1) makes the element occupy all the remaining space of the div (in your case, the vertical space).

You don’t even have to put box-sizing: border-box because Bootstrap has already does that.

Also remove the overflow-x: auto; and the height: 100%, and add overflow: auto;, word-break: break-all; (to break long string) and margin-top: 15px; (only if applicable, for header spacing).

It is good to learn a little flexbox because everything is simpler. See:

#divvisualizar{
   padding: 5px;
   border: 1px solid rgb(85, 85, 85);
   background-color: rgb(255, 255, 255);
   z-index: 100;
   top: 3%;
   left: 25%;
   position: absolute;
   width: 50%;
   box-shadow: rgb(20, 20, 20) 4px 4px 20px 0px;
   border-radius: 5px;
   height: 90%;
}

#div{
   margin-top: 5px;
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
   padding-bottom: 22px;
}

#divconteudoemail{
   flex: 1;
   padding: 2% 6%;
   border: 1px solid rgb(85, 85, 85);
   background-color: rgb(255, 255, 255);
   box-shadow: rgb(20, 20, 20) 4px 4px 20px 0px;
   border-radius: 2px;
   width: 100%;
   word-break: break-all;
   overflow: auto;
   margin-top: 15px;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div id="divvisualizar">

     <div tipo="_div" class="dashed-black-border col-xs-12 col-sm-12 col-md-12 col-lg-12" id="div">
        <div>
         mensagem
         <br>
         qualquer coisa aqui
        </div>
        <div tipo="_div" class="dashed-black-border col-xs-12 col-sm-12 col-md-12 col-lg-12" id="divconteudoemail">TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE


                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETEVTESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

        </div>

     </div>

 </div>

Now an example with nothing above the div, with the same CSS as the previous example:

#divvisualizar{
   padding: 5px;
   border: 1px solid rgb(85, 85, 85);
   background-color: rgb(255, 255, 255);
   z-index: 100;
   top: 3%;
   left: 25%;
   position: absolute;
   width: 50%;
   box-shadow: rgb(20, 20, 20) 4px 4px 20px 0px;
   border-radius: 5px;
   height: 90%;
}

#div{
   margin-top: 5px;
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
   padding-bottom: 22px;
}

#divconteudoemail{
   flex: 1;
   padding: 2% 6%;
   border: 1px solid rgb(85, 85, 85);
   background-color: rgb(255, 255, 255);
   box-shadow: rgb(20, 20, 20) 4px 4px 20px 0px;
   border-radius: 2px;
   width: 100%;
   word-break: break-all;
   overflow: auto;
   margin-top: 15px;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div id="divvisualizar">

     <div tipo="_div" class="dashed-black-border col-xs-12 col-sm-12 col-md-12 col-lg-12" id="div">
        <div tipo="_div" class="dashed-black-border col-xs-12 col-sm-12 col-md-12 col-lg-12" id="divconteudoemail">TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE


                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETEVTESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETE

                            TESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETETESTETESTESTESTESTESSTESTESETE

        </div>

     </div>

 </div>

I also put a padding-bottom: 22px; in the div #div to give a bottom edge spacing. This value you can change if you want.

  • Cara sure gave sweat guidelines, thank you very much. I committed a flaw, there was a content above that was generated by the framework, I ended up not demonstrating in the code, you predicted this and solved the problem, I will be editing the issue, I thank you already!

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.