0

Olá, Estou com um problema a fazer com que o conteudo que tenho dentro da div com a class "box-center", fique dentro da div Pai "wrapper".

Alguém me pode dizer compo posso solucionar o problema, já experimentei a propriedade flex-wrapper mas mesmo assim não consigo solucionar.

O código em questão está aqui:

.wrapper {
  width: 300px;
  height: 500px;
  background-color: aqua;
}

.top {
  display: flex;
  align-items: center;
}

.number {
  flex: 1 1;
  font-size: 14;
  font-weight: bold;
}

.box {
    display: flex;
    flex: 1 1;
    flex-wrap: wrap;
}

.box-left {
  background-color: red;
  margin-right: auto;
  width: 22px;
}

.box-center {
  flex: 1 1;
  background-color: blue;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: auto;
}

.box-right {
  background-color: yellow;
  margin-left: auto;
  width: 22px;
}
<div class="wrapper">
  <div class="top">
    <div class="number">
     1º
    </div>
    <div class="box">
    <div class="box-left">
      A
    </div>
    <div class="box-center">
    Bfdfskjfkdjfjsdfjsdjfksdjfkjsdklfjdskjfdsjflkdsjlkfdsfkdsjfklsjfksfdskjsdfdsjksdjfksdjfksdjfkdsj
    </div>
    <div class="box-right">
    C
    </div>
  </div>
  </div>
</div>

O resultado pretendido seria algo assim: inserir a descrição da imagem aqui

5 Respostas 5

0

Olha talvez não seja a solução que vc esperavam mas fazendo um calc() no width do Box vc consegua ajustar, o negócio é que no calc() vc tem que abater a largura da div.number.

Tipo assim, width: calc(100% - 13px); onde 13px é a largura da div com o número .

Segue o exemplo

.wrapper {
  width: 300px;
  height: 500px;
  background-color: aqua;
}

.top {
  display: flex;
  align-items: center;
}

.number {
  flex: 1 1;
  font-size: 14;
  font-weight: bold;
}

.box {
  display: flex;
  flex: 1 1;
  flex-wrap: wrap;
  width: calc(100% - 13px);
}

.box-left {
  background-color: red;
  margin-right: auto;
  width: 22px;
}

.box-center {
  flex: 1 1;
  background-color: blue;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: auto;
}

.box-right {
  background-color: yellow;
  margin-left: auto;
  width: 22px;
}
<div class="wrapper">
  <div class="top">

    <div class="number">
      1º
    </div>

    <div class="box">
      <div class="box-left">
        A
      </div>
      <div class="box-center">
        Bfdfskjfkdjfjsdfjsdjfksdjfkjsdklfjdskjfdsjflkdsjlkfdsfkdsjfklsjfksfdskjsdfdsjksdjfksdjfksdjfkdsj
      </div>
      <div class="box-right">
        C
      </div>
    </div>

  </div>
</div>

0

Olá,

Faça dessa forma amigo.

<style>
.wrapper {
  width: 300px;
  height: 500px;
  background-color: aqua;
}
.flex {
    display: flex
}

.flex .truncate {
    min-width: 0;
    flex:1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>

<div class="wrapper">
<div class="flex">
<div class="box number">
1º
</div>
<div class="box">
A
</div>
<div class="box truncate">
<span> Bfdfskjfkdjfjsdfjsdjfksdjfkjsdklfjdskjfdsjflkdsjlkfdsfkdsjfklsjfksfdskjsdfdsjksdjfksdjfksdjfkdsj</span>
</div>
<div class="box">
C
</div>
</div>
</div>

Note que dei uma modificada em sua estrutura.

Espero que ajude!

0

Olá,

Fiz as seguintes alterações:

  • Na classe top, adicionei flex: 1 1; e o flex-direction: row;
  • Na classe number, adicionei display: flex;
  • Na classe box, adicionei ```overflow: hidden;````

Espero ter ajudado!

.wrapper {
  width: 300px;
  height: 500px;
  background-color: aqua;
}

.top {
  display: flex;
  flex: 1 1;
  align-items: center;
  flex-direction: row;
}

.number {
  display: flex;
  flex: 1 1;
  font-size: 14;
  font-weight: bold;
}

.box {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    overflow: hidden;
}

.box-left {
  background-color: red;
  margin-right: auto;
  width: 22px;
}

.box-center {
  flex: 1 1;
  background-color: blue;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: auto;
}

.box-right {
  background-color: yellow;
  margin-left: auto;
  width: 22px;
}
<div class="wrapper">
  <div class="top">
    <div class="number">
     1º
    </div>
    <div class="box">
    <div class="box-left">
      A
    </div>
    <div class="box-center">
    Bfdfskjfkdjfjsdfjsdjfksdjfkjsdklfjdskjfdsjflkdsjlkfdsfkdsjfklsjfksfdskjsdfdsjksdjfksdjfksdjfkdsj
    </div>
    <div class="box-right">
    C
    </div>
  </div>
  </div>
</div>

0

Creio que flex-grow seja útil nesse caso (veja esta resposta). O flex-grow divide as larguras dos elementos filhos de um flexbox. Agora, para o text-overflow: ellipsis; funcionar, você precisa setar min-width: 0; na classe .box (fonte). Veja:

.wrapper {
  width: 300px;
  height: 500px;
  background-color: aqua;
}

.top {
  display: flex;
  align-items: center;
}

.number {
 flex-grow: 1;
  font-size: 14;
  font-weight: bold;
}

.box {
    display: flex;
    xflex-wrap: wrap;
    flex-grow: 9;
    min-width: 0;

}

.box-left {
  background-color: red;
 flex-grow: 1;
}

.box-center {
  background-color: blue;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 flex-grow: 8;
}

.box-right {
  background-color: yellow;
 flex-grow: 1;
}
<div class="wrapper">
   <div class="top">
      <div class="number">
         1º
      </div>
      <div class="box">
         <div class="box-left">
            A
         </div>
         <div class="box-center">
            Bfdfskjfkdjfjsdfjsdjfksdjfkjsdklfjdskjfdsjflkdsjlkfdsfkdsjfklsjfksfdskjsdfdsjksdjfksdjfksdjfkdsj
         </div>
         <div class="box-right">
            C
         </div>
      </div>
   </div>
</div>

Você pode ajustar as larguras alterando o valor do flex-grow, onde o valor 1, neste caso, significa 10% do contêiner.

1
  • Eu quero ver todas as divs (number, .box, .box-container, .box-right), mas apenas a .box-container tem over-flow Commented 1/04/2019 às 14:12
0

Seria isso? Se sim, aconselho esse link do origamid inserir a descrição do link aqui sobre display flex. É muito bom!

.wrapper {
  display: flex;
  height: 100px;
  padding: 10px;
  border: 2px solid red;
}
  
.child{
  display:flex;
  padding:5px;
  justify-content:center;
  align-items:center;
  flex:1;
  border:1px solid black;
}

.big-child{
  flex: 2;
} 
  
<div class="wrapper">

<div class="child">
  <h4>1º</h4>
</div>

<div class="child">
  <h4>A</h4>
</div> 

<div class="child big-child">
  <h4>Bfdfskjfkdjfjsdfjsdjfksdjfkjsdklfjdskjf
  dsjflkdsjlkfdsfkdsjfklsjfksfdskjsdfdsjksdjfksdjfksdjfkdsj 
  </h4>
</div>

<div class="child">
  <h4>C</h4>
</div>

</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .