时间戳

首页 > 解决方案 > 使用 CSS 和 flex 布局将外部 div 宽度与内部 div 的最大宽度匹配

css - 使用 CSS 和 flex 布局将外部 div 宽度与内部 div 的最大宽度匹配

问题描述

如何使用 css 限制外部元素缩小到内部元素的大小？

我创建了一个小提琴来反映我遇到的问题好一点：

https://jsfiddle.net/Holger50/4tx7smeb/

.holder {
  display: flex;
  }

.left {
  flex: 3;
  max-width: 500px;
  /*display:inline-block;*/
  }

.right {
  flex: 1;
  }

.someInnerContentWithWidth {
  width: 400px;
  }

<div class='holder'>
  <div class='left'>
    <div class='someInnerContentWithWidth'>
      Content with fixed width
    </div>
  </div>
  <div class='right'>
    This should take up the rest of the space
  </div>
 </div>

右边的 div 应该有蓝色区域未使用的所有剩余空间（具有固定宽度）

第一个盒子按预期工作，它占据了最大的空间量，在达到最大宽度后，右边的 div 占据了剩下的空间。到目前为止很好，但我怎样才能让外部左 div 最大化内部蓝色内容区域？蓝色区域不能再扩大，需要保持该宽度。

使用“display:inline-block;” 由于 flex 布局预测外部宽度，因此无法正常工作。可能有一些简单的解决方案。

标签： cssflexbox

解决方案

推荐阅读