Responsivný CSS s Flex Boxom - html, css, css3, responsive-design, flexbox

Pracujem na stránke, na ktorej som používal FlexBoxje to funkčnosť tabberu. Zdá sa však, že po pridaní tabberu by moja stránka chcela zahodiť každú stranu (profil) a (tabber) na nový riadok namiesto toho, aby zmenila mierku <div>Odteraz je nastavený na prvý mediálny dopyt okolo 1000px, Je to však príliš veľké na to, aby sa dalo zameniť do jedného stĺpca a chceli by ste ich pred zmenšením na nové riadky trochu zmenšiť.

Tu je CSS kontajnera, ľavý bočný div (profil) a pravý bočný div (tabber):

.bio-pages .master-bio-container{
max-width: 1090px;
display: block;
margin: 0 auto;
}

.professor__profile{
background: #FFF;
display: Block;
border-radius: 6px;
float: left;
max-width: 22rem;
width: 100%;
padding: 48px 15px;
border-bottom: #BBB 3px solid
}

.tabs__body {
background-color: white;
padding: 20px;
min-height: 260px;
max-height: 410px;
overflow: auto;
word-wrap: break-word;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
}

.professor__tabs {
background-color: white;
max-width: 44rem;
display: block;
width: 100%;
float: right;
margin: 0 0 45px;
border-radius:6px;
border-bottom: #BBB 3px solid
}


@media (min-width: 40rem) {
.professor__tabs {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
}

Tu je moje fiddle, ignorujte prosím jazyk na strane servera

Nejaké nápady, čo by to mohlo spôsobiť? Takto funguje FlexBox? Vdaka za pomoc!

odpovede:

Na master-bio-container div obsahuje obe deti, ktoré chcete byť stĺpcovými. Vzťah dieťaťa <-> rodič s deťmi s priamym flex je implicitný.

.master-bio-container {
display: flex;
}

https://jsfiddle.net/nf13qx42/