html - 如何用左列中的右列创建2个等高列？

如何创建两个等高列，而右列在左列内？我已经知道制作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

最佳答案

使用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关于您可以使用它完成的伟大工作！

关于html - 如何用左列中的右列创建2个等高列？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43905376/