javascript - 使行适合具有绝对位置的超大内容

Question

下面是一行(在行列表中)的示例，其中有一个行元素超过了它的高度。

设置 overflow: visible 没有解决这个问题，因为它只使内容可见而没有调整外部 DIV 的大小，因为设置了 position: absolute。

如何使行(绿色边框)适应其内容？

它使用了一些来自 Bootstrap 的 CSS 类，理想情况下应该使用现有的类。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">

<div class="form-group panel-heading row" style="display: block; position: relative; line-height: 20px; border: 1px solid green">
  <div class="col-sm-2 switch-wrapper" style="overflow:visible; position:relative; border: 1px solid blue">
    <div style="overflow:visible; border: 1px solid yellow">
      <i class="fa fa-caret-up" style="border: 1px solid black"></i><span style=" position: absolute;margin-left: 5px; border: 1px solid red">A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.
    </span></div>
	</div>
</div>

Answer 1

当一个元素是绝对的时，它就脱离了“渲染流”，被其他元素忽略。所以你不能根据绝对元素改变父div的大小。但您始终可以寻求 JavaScript 解决方案。

$(document).ready(function(){
//Initially set parent height = child height
$('.parent').height($('.child').height());
//set parent's height = child's height when window resizes
$(window).on('resize', function (){
    $('parent').height($('child').height()); 
})
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">

<div class="form-group panel-heading row parent" style="display: block; position: relative; line-height: 20px; border: 1px solid green;padding-bottom:5px;">
  <div class="col-sm-2 switch-wrapper" style="overflow:visible; position:relative; border: 1px solid blue">
    <div style="overflow:visible; border: 1px solid yellow">
      <i class="fa fa-caret-up" style="border: 1px solid black"></i><span class="child" style="position: absolute;margin-left: 5px; border: 1px solid red">A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.
    </span></div>
	</div>
</div>