带有Flex Box的自适应CSS

Question

我正在研究利用FlexBox的Tabber功能的页面。 但是，自从添加了tabber之后，我的页面似乎想要将（profile）和（tabber）的每一面都放到新行中，而不是缩放<div>的大小。 截至目前，它已设置为约1000px的第一个媒体查询。 但这太大了以至于无法将其交换为单列布局，并且希望在放到新行之前将它们缩小一点。

这是容器，左侧div（配置文件）和右侧div（制表符）的CSS：

.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;
  }
}

这是我的小提琴，请忽略服务器端语言

关于什么可能导致此的任何想法？ 这是FlexBox的工作方式吗？ 谢谢您的帮助！

Answer 1

master-bio-container div包含您希望成为柱状体的两个孩子。 与直接flex子级的子<->父级关系是隐式的。

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

https://jsfiddle.net/nf13qx42/