创建一行Flexbox项目，其最大高度由一个子项定义 [英] Create a row of flexbox items with a max height defined by one child

问题描述

我试图创建一个flexbox布局，我认为这会更容易些，但是我找不到正确的方法。 p>我想要一行动态高度允许一个的孩子成长到需要的高度，但限制其他项目的高度，以便内容被切断。

我想使用flexbox，与此相关的不是一个问题，但我想避免在解决方案中使用JavaScript。

任何想法？这可能是一个微不足道的问题，但我无法找到任何与我一直在使用的搜索字词。谢谢！

以下是 CodePen演示

这是我参考的flexbox布局：

  .row {
 display：flex; 
} 
 
 .info {
 flex：0 0 200px; 
} 
 
 .description {
 flex：1 1 auto; 
} 
 
< div class =row> 
< div class =info>这应该动态增长< / div> 
< div class =description>这应该由.info div< / div> 
< / div> 
  

解决方案

Flexbox本身不能做， 。

您将需要一个内部元素，位于绝对定位的第二个子元素内。

是/可以隐藏 overflow：hidden ...或通过添加 overflow：auto

  .wrapper {display：flex;宽度：80％; margin：1em auto; border：2px solid red;}。child {flex：1; border：2px solid green;}。child：nth-​​child（2）{position：relative; overflow：auto; / * overflow：hidden; * / / *为演示目的删除* /}。inner {position：absolute; top：0; left：0;宽度：100％; height：100％;}  

 < div class = wrapper> < div class =child> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Debitis tenetur，laboriosam！抗菌素，抗菌素，抗菌素，抗菌素。 < div class =child> < div class =inner> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Quae molestiae，libero inventore nobis et veritatis，laborum vitae，vel eaque omnis ad adipisci quia velit blanditiis qui。 Cum voluptas quisquam itaque possimus accusamus indicendus quia iure asperiores。 Unde，rerum nihil maiores nisi，iusto voluptate id cumque incidunt，perspiciatis facilis perferendis explicabo。 < / div> < / div>< / div>  

I'm trying to create a flexbox layout that does something I thought would be a little easier, but I'm having trouble finding the right way to do it.

I want to have a row of items with dynamic height that allows one child to grow as tall as need be, but limits the height of the other item so that content is cut off.

I want to use flexbox, so browser issues associated with that are not an issue, but I would like to avoid any use of JavaScript in the solution.

Any ideas? This might be a trivial problem, but I'm having trouble finding anything with the search terms I've been using. Thanks!

Here's a CodePen demo in case you'd like to modify it for use in your answer.

This is my reference flexbox layout:

.row {
    display: flex;
}

.info {
    flex: 0 0 200px;
}

.description {
    flex: 1 1 auto;
}

<div class="row">
    <div class="info">This should grow dynamically</div>
    <div class="description">This should be limited in height by the .info div</div>
</div>

解决方案

Flexbox can't do that natively but it is possible.

You will need an inner element inside the second child which is positioned absolutely.

Here the extra content is/can be hidden with overflow:hidden...or revealed by adding overflow:auto.

.wrapper {
  display: flex;
  width: 80%;
  margin: 1em auto;
  border: 2px solid red;
}
.child {
  flex: 1;
  border: 2px solid green;
}
.child:nth-child(2) {
  position: relative;
  overflow: auto;
  /*overflow: hidden; */ /* removed for demo purposes */
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="wrapper">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis tenetur, laboriosam! Ab facilis, officia id delectus eaque expedita quia, incidunt eligendi aut, minus temporibus tenetur.</div>
  <div class="child">
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
      asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.
    </div>
  </div>
</div>

这篇关于创建一行Flexbox项目，其最大高度由一个子项定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！