Div breaking when label content is too large

Navigation
2
The div of a HTML page is breaking when the text size of one of the label I have inside it is too large, I am using the following code: 

<div class="divRelato" style="background-color: #eee">
  <label>Detalhes físicos Detalhes físicosDetalhes físicosDetalhes físicosDetalhes físicosDetalhes físicosDetalhes físicosDetalhes físicosDetalhes físicos</label>
  <label class="lblHoraImpacto" style="float: right;color:#999;margin-right: 0px">12-12-2016 13:30</label><br>
</div>

The result with the label with little content is this:

Thelabelwithlargecontentbreaks,returning:

Ibelievethatwhenthesecondlabel(dateandtime)is"played" to the next line, the div should expand together. This behavior does not happen with paragraph usage.

    
asked by anonymous 22.12.2016 / 18:45

1 answer

1

In html add an auxiliary div to the container of the blocks and use flex-box as above, below the result 

      <div class="divRelato" style="background-color: #eee">
        <div class="cntAuxiliar">
            <label class="pr">Detalhes físicos Detalhes físicosDetalhes físicosDetalhes físicosDetalhes físicosDetalhes físicosDet</label>
            <label class="lblHoraImpacto" style="color:#999;">12-12-2016 13:30</label>
        </div>
     </div>

CSS 

        div.divRelato{
      display:flex;
      flex-direction: column;
    }
    div.divRelato > label.lblHoraImpacto{
      display: flex;
      min-width: 250px;
      justify-content: center;
      align-items: center;
    }
    div.cntAuxiliar {
      display: flex;
      flex-direction: row;
    }
    div.cntAuxiliar{
      display: flex;
      justify-content: space-between;
    }
    div.cntAuxiliar > label.pr {
      display:flex;
      flex-grow: 1;
    }
    div.cntAuxiliar > label.lblHoraImpacto {
      display:flex;
      flex-grow: 1;
      justify-content: flex-end;
      width: 200px;
      align-items: center;
    }

result

link

    
22.12.2016 / 19:18
CSS alignment cell table Class selector in CSS