Make a container with position absolute adapt to its content in Chrome

Question

Make a container with position absolute adapt to its content in Chrome

Navigation

#1 by (0 votes)

3

I want the container to adapt to the content (textarea) in Firefox it looks good.

But in chrome the container becomes smaller than the textarea.

This is what I have tried:

.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>

html css chrome

asked by Néstor Osvaldo 28.05.2018 в 04:59

source

1 answer

Problem drag and drop javascript Listen to Restfull API consumer data updates from Angular 5

score 0 · Answer 1

What you can do is apply the same margin rules to the two containers and set them display:inline-flex

Here you can read about flexible containers: link

Your code would be like this:

.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>