Почему гармошка открывается для мобильного телефона?

Question

Аккордеон иногда открывается вверх, а не вниз, и проблема, кажется, вызвана "изгибом-направлением".Это проблема, потому что пользователь должен прокрутить вверх до видимой части «.content» div.

Гармошка находится в правом контейнере и была настроена на показ над левым контейнером с «flex»-direction ".

Как заставить гармошку всегда открываться вниз с помощью" flex-direction "?

var acc = document.getElementsByClassName("label");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function(){
	  this.classList.toggle("active");
	  this.nextElementSibling.classList.toggle("show");
	}
}

.stuff {
  background:#ebeef2;
  padding:1em;
  box-sizing:border-box;
}
.container {
  display:flex;
  flex-direction:column;
}
.left,
.right {
  width:100%;
}
.left {
  order:2;
  background:blue;
  padding:1em;
  box-sizing:border-box;
}
.right {
  order:1;
  background:green;
  padding:1em;
  box-sizing:border-box;
}
.label {
  font-size:2em;
  font-weight:bold;
  cursor: pointer;
  position:relative;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
  padding:1em;
  box-sizing:border-box;
}
.content.show {
  opacity: 1;
  max-height: 100%;
}
.label:after {
  content: '+';
  font-size: 32px;
  right: 10px;
  top: 0;
  position: absolute;
  font-weight: 100;
}
.label.active:after {
  content: '-';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="stuff">In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed.</div>

<div class="container">
  <div class="left">Left Side</div>
  <div class="right">
    <div class="label">Label 1</div>
    <div class="content">Content 1</div>
    
    <div class="label">Label 2</div>
    <div class="content">Content 2</div>
    
    <div class="label">Label 3</div>
    <div class="content">Content 3</div>
    
    <div class="label">Label 4</div>
    <div class="content">Content 4</div>
  </div>
</div>
  
<div class="stuff">In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed.</div>

Answer 1

Установка максимальной высоты на 100% в открытом состоянии фактически не приводит к изменению высоты.Чтобы это работало с CSS, вам нужно установить точное значение в фиксированной единице, например 200px.Это может вызвать прыжки на экране.Поскольку jquery уже включен, вам может быть лучше с slideToggle ()