3

Quiero que el contenedor se adapte al contenido (textarea) en Firefox se ve bien.

Pero en chrome el contenedor se vuelve más chico que el textarea.

Esto es lo que he intentado:

.item{
  border: solid 1px;
	position: absolute;
}
.marco{
  border: solid 1px red;
}
<div id="terminal-1" class="item item-terminal item-selected" draggable="true" figure="terminal" style="left: 145px; top: 123px;">
  <div class="marco" style="margin: 10%;">
    <textarea class="texto" cols="10" rows="1" placeholder="texto" style="margin: 10px 15px;">Texto</textarea>
  </div>
</div>

1 respuesta 1

0

Lo que puedes hacer es aplicar las mismas reglas de margenes a los dos contenedores y setearle display:inline-flex

Aqui puedes leer sobre contenedores flexibles: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS

Tu codigo quedaria asi:

.item{
  border: solid 1px;
  display: inline-flex;
  position: absolute;

}
.marco{
  border: solid 1px red;
  display: inline-flex
}
<div id="terminal-1" class="item item-terminal item-selected" draggable="true" figure="terminal" style="left: 145px; top: 123px;">
  <div class="marco" style="margin: 10px 15px;">
    <textarea class="texto" cols="10" rows="1" placeholder="texto" style="margin: 10px 15px;">Texto</textarea>
  </div>
</div>

1
  • Ahora que revise el código que me pusiste me di cuenta que el problema esta en que en el div con class marco tengo el margin en porcentaje, si lo pongo en pixeles no me da ningún problema. Sabes por que ocurre eso?. Gracias por la ayuda. ya encontré el problema. Commented el 28 may. 2018 a las 3:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.