Как использовать переполнение с flex-grow
У меня есть этот код:
html,
body,
#container {
width: 100%;
height: 100%;
}
#container {
display: flex;
background: #ddd;
}
#width {
width: 200px;
height: 100%;
resize: horizontal;
overflow: hidden;
background: #eee;
}
#remaining {
flex-grow: 1;
overflow: scroll;
}
#resize {
width: 200px;
height: 200px;
resize: both;
overflow: hidden;
background: #ccc;
}<!DOCTYPE html>
<html>
<body>
<div id = "container">
<div id = "width">Width</div>
<div id = "remaining">
<div id = "resize">Resize</div>
</div>
</div>
</body>
</html>Вот что я пытаюсь сделать:
- Вы можете изменить размер
#width - Вы можете изменить размер
#resize
Проблема в том, что когда я изменяю размер #resize, #width сжимается, чтобы освободить для него место.
Что я ищу, так это когда я изменяю размер, #remaining показывает полосу прокрутки и больше ничего не изменяет.
Я считаю, что это происходит потому, что #remaining не имеет свойства width, а вместо него flex-grow. И поэтому он позволяет изменять ширину, потому что у него нет заданной ширины.
Я ищу чистый ответ HTML/CSS, но JavaScript тоже подойдет. (конечно, если он надежен, не сломается и не сильно замедлит выполнение с использованием таких методов, как setInterval)
Я также хочу сказать, что я использую гибкий макет на #containerТолько, чтобы заставить #remaining занимать все оставшееся пространство, и если display: flex удалить, он все равно будет работать с полным кодом, который у меня есть.
Ответы 1
Если вы откажетесь от flex:grow и вместо этого рассчитаете ширину remaining в css, это сработает.
.remaining{
width: calc(100% - 200px);
overflow-x: auto;
}
Это сработало во фрагменте, который я предоставил, но не в моем полном примере. Но спасибо!