Контент не будет расширяться в div с установленной минимальной шириной и максимальной шириной - ширина всегда остается на минимуме - PullRequest
Новая
       11

Контент не будет расширяться в div с установленной минимальной шириной и максимальной шириной - ширина всегда остается на минимуме

0 голосов
/ 14 февраля 2019

У меня есть контейнер меню, который содержит <a> теги с различной длиной строк.

Когда я назначаю контейнеру своего меню следующий CSS, мое меню всегда статически устанавливается на минимальную ширину (в данном случае 200px).Я хочу вытянуть более длинные струны до максимальной ширины.Если я не установлю минимальную ширину, контейнер станет очень маленьким из-за ширины nav-bar s 50px.navbar находится в другом файле React с отдельным файлом CSS.Как я могу отделить меню от управления по ширине навигационной системы?

* содержимое расширяется только после установленной минимальной ширины, если <a> содержит строку без пробелов / разрывов слов.

Вот кодовая ручка с примером поведения: https://codepen.io/vee1234/pen/omQxWP

CSS 

  .nav-bar {
     width: 50px;
    }

    .hover-menu {
      display: inline-block
      min-width: 200px;
      max-width: 400px;
      width: 100%
      position: relative;
      left: 40px;
    }

    .link a {
      line-height: 35px;
      color: #d8d8d8;
      width: 100%;
      height: auto;
    }

REACT 

 <Nav className={navbar}>   
   <Menu>
    <div className={hover-menu}>
      <div className={links}>
        <a>some text</a>
        <a>some longer text that never expands past 200px</a>
      </div>
      </Menu>
    </Nav>
 </div>

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

На самом деле, вы можете предотвратить соответствие hover-menu ограничениям ширины родительского элемента, используя позиции.В этом случае тег menu будет иметь 

position:relative;

, а класс hover-menu будет иметь 

position:absolute;
left:0;

, и вы можете также указать другие правила CSS в hover-menu.

0 голосов
/ 14 февраля 2019

Попробуйте: 

.menu {
  display: inline-block;
  min-width: 200px;
  max-width: 400px;
}

.link a {
  display: block;
  line-height: 35px;
  color: #d8d8d8;
  height: auto;
  word-wrap: break-word;
}

Я думаю, что проблема у вас была в том, что все ваши ссылки были в линии.Надеюсь, я прав, предполагая, что вы хотели, чтобы они были сложены ... Если это так, создание блока отображения тегов a при одновременном предоставлении контейнеру меню встроенного блока с min и max отображает меню, как описано,

...