Question

我有一个有两列的flexbox容器，第二列包含另一个有两列的flexbox容器。我希望两个嵌套列的高度与包含它们的列的高度相同，这与另一个外部列的高度相同。

基本上，我希望它看起来像三个等高的列，它们之间有一个装订线，如下所示：

我通过将内部flexbox容器的高度设置为100％，在JSFiddle和CodePen中完成了这项工作。

HTML：

<div>
  <div class="flex-container">
    <div class="flex-col">
      <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor metus, ultrices ut egestas eget, lacinia ut tellus. Duis consectetur velit ut aliquam convallis. Donec erat ex, interdum et justo in, varius pharetra nunc. Integer rutrum, ante nec gravida scelerisque, urna massa convallis enim, et tincidunt leo odio eget nisl. Ut et blandit velit, ac tristique massa. Integer leo mi, tincidunt in bibendum eu, blandit eget est. Cras convallis elit id urna convallis euismod.</div>
    </div>
    <div class="flex-col">
      <div class="flex-container list-container">
        <div class="flex-col list">Content</div>
        <div class="flex-col list">Content</div>
      </div>
    </div>
  </div>
</div>

和CSS：

.box {
  background-color: blue;
}

.list-container {
  height: 100%;
}

.flex-col.list {
  background-color: lightblue;
}

.flex-container {
  display: flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  margin-left: -1em;
}

.flex-col {
  -webkit-flex: 1;
  flex: 1;
  margin-left: 1em;
}

但是这里有一个奇怪的部分：在Chrome上，它似乎只能在这些网站上运行，而且它在Safari中根本不起作用。如果我在Safari中打开JSFiddle或CodePen链接，则右侧两列会在其内容中显示已折叠。同时，如果我将相同的代码粘贴到HTML文件中并在 Chrome或Safari中打开，则右边两列会显示拉伸到视口高度。但是，文件和JSFiddle / CodePen链接在Firefox中都可以正常工作。

所以我的问题是：

这里发生了什么事？
在没有设定固定高度或牺牲我的排水沟或筑巢的情况下，实现我想要的外观的最佳方法是什么？

Answer 1

这里发生了什么？

您的.flex-col不是flex-container，它只是一个弹性项目。然后在flex-container内使用flex-item，flex-item正在按预期工作，它会填充自己内容的高度。

什么是实现我想要的外观的最佳方式，而无需设置固定高度或牺牲我的排水沟或我的筑巢？

您还需要将flex-container设为.box { background-color: blue; } .flex-col.list { background-color: lightblue; } .flex-container { display: flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: wrap; -webkit-flex-wrap: wrap; margin-left: -1em; } .flex-col { -webkit-flex: 1; flex: 1; margin-left: 1em; } .flex-col.flex-container { margin-left: 0; }。

＆＃13;

<div>
  <div class="flex-container">
    <div class="flex-col">
      <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor metus, ultrices ut egestas eget, lacinia ut tellus. Duis consectetur velit ut aliquam convallis. Donec erat ex, interdum et justo in, varius pharetra nunc. Integer rutrum, ante
        nec gravida scelerisque, urna massa convallis enim, et tincidunt leo odio eget nisl. Ut et blandit velit, ac tristique massa. Integer leo mi, tincidunt in bibendum eu, blandit eget est. Cras convallis elit id urna convallis euismod.</div>
    </div>
    <div class="flex-col flex-container">
      <div class="flex-col list">Content</div>
      <div class="flex-col list">Content</div>
    </div>
  </div>
</div>

＆＃13;

private void btnSave_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(ImagenCortadaRuta))
{
    MessageBox.Show("Por favor corte la imagen.", "Procesador OCR", MessageBoxButtons.OK, MessageBoxIcon.Warning);
    return;
}

if (!File.Exists(ImagenCortadaRuta))
{
    MessageBox.Show("No existe el archivo " + ImagenCortadaRuta + ".\nCorte la imagen nuevamente.", "Procesador OCR", MessageBoxButtons.OK, MessageBoxIcon.Error);
    return;
}

var intType = 0;
if (rdbPrensa.Checked) intType = 1;
if (rdbRevista.Checked) intType = 2;

var frmRegNoti = new frmProcRegNoticia();
frmRegNoti.blLanzadoDesdeOcr = true;
frmRegNoti.adminDetailProd1.PermitirIngreso = false;
foreach (DataGridViewRow item in dgvPeriodistas.Rows)
{
    _lstintPeriodistas.Add(item.Cells["prd_id"].Value.ToString());
}

Console.WriteLine($"IsGrayScale [ImagenCortadaRuta]: {ImagenCortadaRuta} : {DateTime.Now}");
Console.WriteLine($"ImagenMiniatura {ImagenMiniatura} : {DateTime.Now}");
var imgTemp = System.Drawing.Image.FromFile(ImagenCortadaRuta);
var blColor = Utility.IsGrayScale(imgTemp);
imgTemp.Dispose();
Console.WriteLine($" ================================== Fin IsGrayScale : {DateTime.Now}");
Console.WriteLine($" ================================== INI ImportarDatos : {DateTime.Now}");
frmRegNoti.ImportarDatos(elementosFinal, dtpFecha.Value, intType, txtMedio._ID.ToString(), txtSeccion._ID.ToString(), txtMSecc._ID.ToString(), txtPag.Text, ImagenCortadaRuta, dicTranscripcion.txtControlTexto.InnerText, txtResumen.Text, dicTitular.txtControlTexto.InnerText, TamañoVertical, CantidadColumnas, CantidadPaginas, ImagenMiniatura, "", blColor, _lstintPeriodistas, IdAnalisis);
frmRegNoti.ShowDialog();
Console.WriteLine($" ================================== Fin ShowDialog : {DateTime.Now}");
if (frmRegNoti.GuardadoCorrecto)
{
    Console.WriteLine($" ================================== DENTRO frmRegNoti.GuardadoCorrecto: {DateTime.Now}");
    //Una vez cerrado actualizamos los bloques
    _existeBloqueTemporal = ProcesadorOCRMetodos.MarcarComoProcesada(IdGrupoActual, CantidadPaginas, InformacionBloque.ConvertirATexto(_totalCoordenadasActuales), out _strError);
    _notaGuardada = true;
    Console.WriteLine($" ================================== FIN MarcarComoProcesada: {DateTime.Now}");
    Console.WriteLine($" ================================== INI BorrarForm: {DateTime.Now}");
    BorrarForm();
    for (var indicePagina = 0; indicePagina < FrDocumentAccess.FRDocumentPagesCount; indicePagina++)
    {
        Console.WriteLine($" ================================== INI ActivarFRDocument: {DateTime.Now}");
        FrDocumentAccess.ActivarFRDocument(FrDocumentAccess.FRDocumentPages[indicePagina].FRDocumentIndex);
        Console.WriteLine($" ================================== INI CargarInformacionBloques: {DateTime.Now}");
        CargarInformacionBloques(FrDocumentAccess.FRDocumentPages[indicePagina].IdPagina);
    }
    Console.WriteLine($" ================================== FIN BorrarForm: {DateTime.Now}");
}
else
{
    ProcesadorOCRMetodos.EliminarAnalisisDeGrupo(IdGrupoActual, out _strError);
}
Console.WriteLine($" ================================== INI frmRegNoti.Dispose : {DateTime.Now}");
frmRegNoti.Dispose();
Console.WriteLine($" ================================== FIN frmRegNoti.Dispose : {DateTime.Now}");
}

＆＃13;

等高嵌套的flexbox列

1 个答案: