响应不是取决于屏幕宽度而是取决于父 div 宽度？

Question

当父 div 太小而无法在同一行上显示时，我希望下面的块相互堆叠。

我试过使用带最大宽度的@media 规则，但它只考虑浏览器的宽度，而不是父 div。

我试过使用 width 而不是 max-width 但没有用。

.menuTwoColumns {
  display: table;
}

.menuTwoColumns > div {
  width: 50%;
  display: table-cell;
  vertical-align: middle;
  padding-right: 20px;
}

/* this only help for the browser width not the parent div width */
@media screen and (max-width: 479px) {
    .menuTwoColumns {
        display: block;
    }
    .menuTwoColumns > div {
        display:inline-block;
    }
}

<html>
    <head>
<style>

</style>
    </head>
    <body>
        <div style="background-color:grey;  width: 500px;  resize: horizontal;  overflow: auto;">
            <div class="menuTwoColumns">
                <div>
                    <p>You can resize</p>
                </div>
                <div>
                    <p>the parent div with your mouse and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text</p>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

使用 flexbox 做不同的事情

.menuTwoColumns {
  display: flex;
  flex-wrap:wrap;
}

.menuTwoColumns > div {
  flex:calc(479px / 2);
  display:flex;
  align-items:center;
}

<div style="background-color:grey;  width: 500px;  resize: horizontal;  overflow: auto;">
  <div class="menuTwoColumns">
    <div>
      <p>You can resize</p>
    </div>
    <div>
      <p>the parent div with your mouse the parent div with your mouse and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text</p>
    </div>
  </div>
</div>

响应不是取决于屏幕宽度而是取决于父 div 宽度？

Responsive depending not on screen width but on parent div width?

html

css

responsive-design