html - CSS - 两个并排自动宽度的 Div

Question

我想制作两列，其中包含文本。根据位置的不同，更多的文本框会增加宽度，但高度必须相同。

这是我的代码，我不知道如何解决这个问题。

https://jsfiddle.net/x0qqtr2y/

<div id="main>
  <div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div>
  <div class="cell2">SomeTEXTSomeTEXT</div>
</div>

#main {
    width:100%;
    background:gray;
    display:table;
    position:relative;
}
.cell1 {
    width:auto;
    height:auto;
    display:table-cell;
    background:red;
    float:left;
}

.cell2 {
    width:auto;
    height:auto;
    display:table-cell;
    float:left;
    background:blue;
}

Answer 1

使用显示: flex ；在下面的父元素示例中

CSS

#main {
width:100%;
display:flex;
}
.cell1 {
    background:red;
}

.cell2 {
    background:blue;
}

在你的 main 上确保关闭引号

<div id="main">
  <div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div>
  <div class="cell2">SomeTEXTSomeTEXT</div>
</div>

要了解有关 flex 的更多信息，请使用链接: https://css-tricks.com/snippets/css/a-guide-to-flexbox/