Question

所以，自从我处理网络开发以来已经有一段时间了，我似乎无法记住如何处理这个问题。几个小时的谷歌搜索后，我对灵活盒和其他整洁的工具更了解，但没有一个解决方案正在做这个技巧。

我想要的是什么：

容器A，有两列，左和右。
左列通常为25％宽度，右列通常为75％宽度。
右列有最大宽度约束，比如500px。
当右栏达到最大宽度时，左栏应填满剩余空间，以免浪费。

我似乎无法实现这一点。我已尝试在每个上进行弹性设置，右侧列的弹性基础为75％，左侧为“拉伸”;我试过改变显示风格;我甚至尝试了一些溢出：隐藏的技巧（完全知道他们不会工作，因为我不想隐藏溢出）。到目前为止，我只得到两个变体 - 要么两个列保持其初始大小为25％/ 75％，要么左列延伸到右列后面而不是占用可用空间。

如果可能的话，我正在寻找一个CSS解决方案。

Answer 1

＆＃13;

.a {
    display: flex;
}

.left {
    flex: 1;
}

.right {
    flex: 3;
    max-width: 500px;
}

.left, .right {
    border: 1px solid #ddd;
    padding: 10px;
}

＆＃13;

 <div class="a">
		 <div class="left">
			first
		 </div>
		 <div class="right">
			second
		 </div>
	 </div>

＆＃13;

max-width: 500px .right在async function* connectAndRead() { const socket = net.connect(80, 'localhost'); socket.on('data', data => ???); socket.on('end', socket.close()); }中，大屏幕中你看不到75％的宽度。

CSS - 具有一个最大宽度的两个百分比宽度的填充空间？

1 个答案: