如何在左列内创建 2 个等高列？答案

【问题标题】：How can I create 2 equal height columns with the right column inside the left column?如何在左列内创建 2 个等高列？
【发布时间】：2017-08-24 23:43:07
【问题描述】：

如何创建两个等高的列，右列在左列内？我已经知道制作 2 个等高列的其他方法，但是，CSS 没有父选择器，所以它不起作用。

我想做的是创建可扩展的 div。当我折叠左列上的 div 时，我需要隐藏右列。我以前在 JavaScript 中工作过，但是，现在我正在寻找一个纯 CSS 解决方案。如果我可以将右列放在左列中，我就可以解决问题。另外，绝对位置是不够的。

另外，两列的高度应该等于最大列的内容。

<div class="container">
    <div class="left-column">
        ssss
        dddd<br/>
        ffff<br/>
        ddd
        <div class="right-column">
            fffff
        </div>
    </div>
</div>

.container
{
    height:100%;
}

.left-column
{
    background-color:blue;
    width:50%;
}

.right-column
{
    background-color:red;
    width:100%;
    position:relative;
    left:100%;
}

https://codepen.io/anon/pen/MmVYma

【问题讨论】：

你有一个带有javascript工作版本的codepen吗？很高兴了解更多您正在寻找的结果
不，但是，我可以做一个。

标签： html css

【解决方案1】：

使用 FlexBox！ (display:flex;)

.container {
  height:100px;
}

.left-column {
  display:flex;
  background-color:blue;
}

.right-column {
  background-color:red;
  width:50%;
  margin-left:auto;
}

<div class="container">
  <div class="left-column">
    ssss
    dddd<br/>
    ffff<br/>
    ddd
    <div class="right-column">
      fffff
    </div>
  </div>
</div>

https://codepen.io/krabbypattified/pen/ZKxYJW

Here's a guide你可以用它做的伟大的事情！

【讨论】：

那是完美的。现在我只需要使用 JavaScript 解决方案，对于不支持 FlexBox 的浏览器，如果它们禁用了 JavaScript，那么它只会显示完全展开。非常感谢您的帮助。