Sign in to follow this  
sarcus

Flex-контейнер с input элементами расширяет границы основного блока

Recommended Posts

Основной блок содержит 2 блока
1-й с некоторым текстом
2-й flex блок с input элементами

2-й блок как будто не видит <b>ширины</b> основного блока, которую <b>задает 1-й блок</b> (sometext)  
и расширяет основной. 

Подскажите как решить данную проблему ? 

Пример :  https://jsfiddle.net/sarcus/1vmaf3wo/14/

 

Но если вместо input (class='inp') вставить div то все приходит в норму:

https://jsfiddle.net/1vmaf3wo/83/

<style>
.cont { 
            position: absolute;
            top : 200px; left: 30px;
            border: 1px solid #ccc;
        }
        .ctrl {  
            display: flex; 
            width: 100%;
            flex-direction: row;
            border: 1px solid#ccc; 
        }
        .btn { 
            flex: 0 0 auto;
            
        }
        .inp {
            flex: 1 1 auto;
            width: 100%;
        }
</style>
<div class="cont">
            <div class="sometext">555 5555 5555 5555 5556</div>
            <div class="ctrl">
                    <input type="button" class="btn"  value="<<" />
                    <input class="inp" type="text" />
                    <input type="button" class="btn" value=">>" />
            </div>
            
        </div>

 

Edited by sarcus

Share this post


Link to post
Share on other sites

а почему он должен что то видеть и кто решил что блок с текстом это "основной" блок? У вас абсолютно позиционированный родитель, а значит он принимает ширину контента. У input type="text" ширина по умолчанию равна 169px, плюс добавляем ширину кнопок по бокам, плюс бордер. Все вместе задает ширину для блока cont, так как является наиболее широким блоком. Ну а див с текстом просто растягивается по этой ширине, так как по умолчанию у дива ширина 100% В случае же замены инпута на див, самым широким становится именно блок с текстом, поэтому cont и становится уже

Share this post


Link to post
Share on other sites

 

1 час назад, Switch74 сказал:

попробуйте
 


.inp {
    flex: 1 1 auto;
    width: 100px;
}

 

Работает!  

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By kask
      Подскажите какие стили нужно переопределить чтобы навигационная панель в navbar выезжала слева на право а не сверху вниз как определенно стандартно 
    • By Amaere
      Ищу ментора по веб-разработке. Готов работать бесплатно или платить за обучение. Главное, что бы я мог потом зарабатывать.
       
  • Member Statistics

    46,511
    Total Members
    3,128
    Most Online
    Marking
    Newest Member
    Marking
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.