L'utilisation d'un FlexBox dans un conteneur d'amorçage me donne des barres de défilement dans les mauvais endroits

Question

Je veux que ma page pour avoir une mise en page de FlexBox, où l'en-tête et le séjour de pied au même endroit, mais le contenu remplit le reste de l'écran. Cependant, en raison de la façon dont ma page est mis en place, je dois utiliser un conteneur dans la zone de contenu principal de mon code. Cela me donne le problème d'une barre de défilement qui ne sont pas du côté de la page où il devrait être, il est plutôt au bord du récipient. Est-ce que quelqu'un peut m'aider soit à placer la barre de défilement là où elle est censée être, soit à me dire pourquoi je ne peux pas le faire comme je le fais et à me donner une solution de rechange viable?

Voici l'exemple de travail d'origine sans amorçage:

https://jsfiddle.net/SuperMelons/n2s9xrt0/

HTML:

<div class="mybox"> 
    <div class="myrow myheader"> 
    <p><b>header</b> 
     <br /> 
     <br />(sized to content)</p> 
    </div> 
    <div class="myrow mycontent"> 
    <p> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
    </p> 
    </div> 
    <div class="myrow myfooter"> 
    <p><b>footer</b> (fixed height)</p> 
    </div> 
</div> 

CSS:

html, 
body { 
    height: 100%; 
    margin: 0 
} 

.mybox { 
    display: flex; 
    flex-flow: column; 
    height: 100%; 
} 

.mybox .myrow { 
    border: 1px dotted grey; 
} 

.mybox .myrow.myheader { 
    flex: 0 1 auto; 
} 

.mybox .myrow.mycontent { 
    display: flex; 
    flex-flow: column; 
    flex: 1 1 auto; 
    overflow-y: auto; 
} 

.mybox .myrow.myfooter { 
    flex: 0 1 40px; 
} 

Voici l'exemple qui ne fonctionne pas à cause de le conteneur d'amorçage:

https://jsfiddle.net/SuperMelons/2L5cbt8m/2/

HTML avec Bootstrap:

<div class="mybox"> 
    <div class="myrow myheader"> 
    <p><b>header</b> 
     <br /> 
     <br />(sized to content)</p> 
    </div> 
    <div class="myrow mycontent container"> 
    <p> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
    </p> 
    </div> 
    <div class="myrow myfooter"> 
    <p><b>footer</b> (fixed height)</p> 
    </div> 
</div> 

Answer 1

Voulez-vous somethink comme ça?

https://jsfiddle.net/uykf3Lp8/2/

<div class="myrow mycontent"> 
    <div class="container"> 
     content 
    </div> 
</div>