J'essaie de créer un site Web réactif qui change avec la largeur de l'écran. Sur un écran large, scoreDiv a un défilement horizontal et vertical. Cependant, sur un écran de plus petite largeur, je veux que scoreDiv n'ait qu'un défilement horizontal et une flexion dans le sens vertical (je ne sais pas si j'utilise une terminologie correcte, j'espère que cela a du sens). Lorsque j'essaie d'utiliser overflow-x: scroll, il défile également dans la direction y pour une raison quelconque. Toute aide est appréciée!

CSS et HTML

#secondRow {
  position: relative;
  width: 100%;
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
}

#controlSidebar {
    text-align: center;

    border-right: 3px solid teal;
    background-color: white;
    background-size: cover;
    width: 375px;
}

#scoreDiv {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 1em;
}
@media only screen and (max-width: 600px) {
  #secondRow {
    flex-direction: column;
  }

  #controlSidebar {
    text-align: center;

    width: auto;
    border-right: 0;
    border-bottom: 3px solid teal;
    background-color: white;
    background-size: cover;
    padding-bottom: 2em;
  }

  #scoreDiv {
    overflow-x: scroll;
    padding: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
  }
}
<div id="secondRow">
  <div id="controlSidebar">
    <!--content-->
  </div>
  <div id="scoreDiv">
    <!--content-->
  </div>
</div>

MODIFIER J'aurais dû mentionner que j'ai une barre latérale qui reste à gauche sur un écran large et reste en haut pour un écran étroit. J'ai mis à jour le code pour refléter cela. J'ai également dessiné une image pour montrer ce que j'essaie d'accomplir. C'est le problème que j'ai en ce moment.

0
Henry 17 janv. 2017 à 19:55

2 réponses

Meilleure réponse

Vous devez supprimer le débordement et n'ajouter aucune enveloppe à scoreDiv. Aldo ajouter le débordement à secondRow

#secondRow {
    border: 1px solid #ccc;
    overflow: auto;
    position: relative;
    width: 100%;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    float: left;
    width: calc(100% - 380px);
}
#controlSidebar {
    text-align: center;
    border-right: 3px solid teal;
    background-color: white;
    background-size: cover;
    float: left;
    width: 375px;
}
#scoreDiv {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    padding-right: 1em;
    white-space: nowrap;
}

#controlSidebar devra être déplacé en dehors de #secondRow car #secondRow agit en tant que conteneur pour le contenu défilable. J'ai ajouté le code HTML suivant pour le test

<div id="controlSidebar">
    <!--content-->
    menu
</div>
<div id="secondRow">

    <div id="scoreDiv">
        <!--content-->
        content content 1 content 2 content 3 content 4 content 5 content 6 content 7 content 8 content 9 content 10 content 11 content 12 content 13 content 14 content 15 content 16 content 17 content 18 content 19 content 20 content 21
    </div>
</div>
0
Buffalo 18 janv. 2017 à 17:03

Vous pouvez le faire sans float. Utilisez min-width: 0; pour la colonne de droite. Exemple: https://codepen.io/schden/pen/jpvVpp

0
Joyful 8 août 2018 à 09:58