如何制作firefox溢出accrodion CSS

时间:2017-11-06 12:10:54

标签: html css html5 css3 firefox

我正在寻找有关Firefox中溢出框的问题的帮助 这里有一些显示我的问题的GIF。 第一个gif在Chrome中,它按照我的预期工作(箭头动画不起作用) 第二个gif在Firefox中,它搞砸了。

Chrome GIF

Firefox GIF

$GetCon = Get-NetTCPConnection
$ss = $GetCon | select OwningProcess | Group-Object -Property OwningProcess | select Count, Name

$cccs = $ss | Select -ExpandProperty Name

$flam = ForEach ($oio in $cccs) {
$GetCon | Where-Object {$_.OwningProcess -eq $oio} | select -Last 1
}


$yyoiu = $GetCon | Group-Object -Property OwningProcess

for ($irt = 0; $irt -lt $yyoiu.Count; $irt++)
{ 

$rfrt = foreach($grpop in $yyoiu[0..$irt]){
$jrtgrpcnt = [int]($grpop.Group.Count - 1)
$grpop.Group | select -First (0+$jrtgrpcnt)

  }
}


$CntTableBodyr=""
#$frcntArrr = $flam | select -ExpandProperty OwningProcess #$frcntr.GetEnumerator() |%{$_}
ForEach ($Rowr in $flam) {
  $CntTableBodyr+="<tr id='111' style='background-color: lightblue;'><td>$($Rowr.OwningProcess)</td><td>$($Rowr.LocalAddress)</td></tr>
  <tr id='222' style='background-color: lightgray;'><td>$($rfrt.OwningProcess)</td><td>$($rfrt.LocalAddress)</td></tr>"
}

$html=@"
<table id='tblId'>
$CntTableBodyr
</table>
"@

ConvertTo-Html -Body $html | Out-File c:\out.html
Invoke-Item c:\out.html
.panel{
       width: 100%;
       height: 100%;

    .panel-body{
      display: flex;
      flex-direction: column;
      max-height: calc(100% - 84px); //- is header
      padding: 30px;
      position: relative;
    }

    .accordion {
      display: flex;
      flex-direction: column;
    }
    .accordion-section {
      &.expanded {
        display: flex;
        flex-direction: column;
      }
    }

    .accordion-section-header-container{
      display: block;
      .accordion-header{
        display: flex;
        align-items:center;
        justify-content: space-between;
        flex-direction: row;
      }
    }
    
    .accordion-section-body {
      display: none;
      &.expanded {
        display: flex;
        flex-direction: column;
        overflow: auto;
      }
    }

    ul.list {
      list-style: none;
      padding: 0;
      overflow-y: auto;
      margin: 0;
    }

我已经尝试了一切我认为可以工作的东西,但我仍然迷失了。基本上我有很多类似的问题,我真的需要知道如何解决这个问题。

非常感谢您的回答。

0 个答案:

没有答案